Merge branch 'develop' into copilot/add-user-mute-settings

packages/backend/src/@types/redis-lock.d.ts

@@ -1,13 +0,0 @@
-/*
- * SPDX-FileCopyrightText: syuilo and misskey-project
- * SPDX-License-Identifier: AGPL-3.0-only
- */
-
-declare module 'redis-lock' {
-	import type Redis from 'ioredis';
-
-	type Lock = (lockName: string, timeout?: number, taskToPerform?: () => Promise<void>) => void;
-	function redisLock(client: Redis.Redis, retryDelay: number): Lock;
-
-	export = redisLock;
-}

packages/backend/src/boot/master.ts

@@ -10,8 +10,6 @@ import * as os from 'node:os';
 import cluster from 'node:cluster';
 import chalk from 'chalk';
 import chalkTemplate from 'chalk-template';
-import * as Sentry from '@sentry/node';
-import { nodeProfilingIntegration } from '@sentry/profiling-node';
 import Logger from '@/logger.js';
 import { loadConfig } from '@/config.js';
 import type { Config } from '@/config.js';
@@ -74,6 +72,9 @@ export async function masterMain() {
 	bootLogger.succ('Misskey initialized');
 
 	if (config.sentryForBackend) {
+		const Sentry = await import('@sentry/node');
+		const { nodeProfilingIntegration } = await import('@sentry/profiling-node');
+
 		Sentry.init({
 			integrations: [
 				...(config.sentryForBackend.enableNodeProfiling ? [nodeProfilingIntegration()] : []),

packages/backend/src/boot/worker.ts

@@ -4,8 +4,6 @@
  */
 
 import cluster from 'node:cluster';
-import * as Sentry from '@sentry/node';
-import { nodeProfilingIntegration } from '@sentry/profiling-node';
 import { envOption } from '@/env.js';
 import { loadConfig } from '@/config.js';
 import { jobQueue, server } from './common.js';
@@ -17,6 +15,9 @@ export async function workerMain() {
 	const config = loadConfig();
 
 	if (config.sentryForBackend) {
+		const Sentry = await import('@sentry/node');
+		const { nodeProfilingIntegration } = await import('@sentry/profiling-node');
+
 		Sentry.init({
 			integrations: [
 				...(config.sentryForBackend.enableNodeProfiling ? [nodeProfilingIntegration()] : []),

packages/backend/src/config.ts

@@ -11,6 +11,7 @@ import { type FastifyServerOptions } from 'fastify';
 import type * as Sentry from '@sentry/node';
 import type * as SentryVue from '@sentry/vue';
 import type { RedisOptions } from 'ioredis';
+import type { ManifestChunk } from 'vite';
 
 type RedisOptionsSource = Partial<RedisOptions> & {
 	host: string;
@@ -187,9 +188,9 @@ export type Config = {
 	authUrl: string;
 	driveUrl: string;
 	userAgent: string;
-	frontendEntry: { file: string | null };
+	frontendEntry: ManifestChunk;
 	frontendManifestExists: boolean;
-	frontendEmbedEntry: { file: string | null };
+	frontendEmbedEntry: ManifestChunk;
 	frontendEmbedManifestExists: boolean;
 	mediaProxy: string;
 	externalMediaProxyEnabled: boolean;

packages/backend/src/core/AppLockService.ts

@@ -1,44 +0,0 @@
-/*
- * SPDX-FileCopyrightText: syuilo and misskey-project
- * SPDX-License-Identifier: AGPL-3.0-only
- */
-
-import { promisify } from 'node:util';
-import { Inject, Injectable } from '@nestjs/common';
-import redisLock from 'redis-lock';
-import * as Redis from 'ioredis';
-import { DI } from '@/di-symbols.js';
-import { bindThis } from '@/decorators.js';
-
-/**
- * Retry delay (ms) for lock acquisition
- */
-const retryDelay = 100;
-
-@Injectable()
-export class AppLockService {
-	private lock: (key: string, timeout?: number, _?: (() => Promise<void>) | undefined) => Promise<() => void>;
-
-	constructor(
-		@Inject(DI.redis)
-		private redisClient: Redis.Redis,
-	) {
-		this.lock = promisify(redisLock(this.redisClient, retryDelay));
-	}
-
-	/**
-	 * Get AP Object lock
-	 * @param uri AP object ID
-	 * @param timeout Lock timeout (ms), The timeout releases previous lock.
-	 * @returns Unlock function
-	 */
-	@bindThis
-	public getApLock(uri: string, timeout = 30 * 1000): Promise<() => void> {
-		return this.lock(`ap-object:${uri}`, timeout);
-	}
-
-	@bindThis
-	public getChartInsertLock(lockKey: string, timeout = 30 * 1000): Promise<() => void> {
-		return this.lock(`chart-insert:${lockKey}`, timeout);
-	}
-}

packages/backend/src/core/CoreModule.ts

@@ -21,7 +21,6 @@ import { AccountUpdateService } from './AccountUpdateService.js';
 import { AiService } from './AiService.js';
 import { AnnouncementService } from './AnnouncementService.js';
 import { AntennaService } from './AntennaService.js';
-import { AppLockService } from './AppLockService.js';
 import { AchievementService } from './AchievementService.js';
 import { AvatarDecorationService } from './AvatarDecorationService.js';
 import { CaptchaService } from './CaptchaService.js';
@@ -166,7 +165,6 @@ const $AccountUpdateService: Provider = { provide: 'AccountUpdateService', useEx
 const $AiService: Provider = { provide: 'AiService', useExisting: AiService };
 const $AnnouncementService: Provider = { provide: 'AnnouncementService', useExisting: AnnouncementService };
 const $AntennaService: Provider = { provide: 'AntennaService', useExisting: AntennaService };
-const $AppLockService: Provider = { provide: 'AppLockService', useExisting: AppLockService };
 const $AchievementService: Provider = { provide: 'AchievementService', useExisting: AchievementService };
 const $AvatarDecorationService: Provider = { provide: 'AvatarDecorationService', useExisting: AvatarDecorationService };
 const $CaptchaService: Provider = { provide: 'CaptchaService', useExisting: CaptchaService };
@@ -320,7 +318,6 @@ const $ApQuestionService: Provider = { provide: 'ApQuestionService', useExisting
 		AiService,
 		AnnouncementService,
 		AntennaService,
-		AppLockService,
 		AchievementService,
 		AvatarDecorationService,
 		CaptchaService,
@@ -470,7 +467,6 @@ const $ApQuestionService: Provider = { provide: 'ApQuestionService', useExisting
 		$AiService,
 		$AnnouncementService,
 		$AntennaService,
-		$AppLockService,
 		$AchievementService,
 		$AvatarDecorationService,
 		$CaptchaService,
@@ -621,7 +617,6 @@ const $ApQuestionService: Provider = { provide: 'ApQuestionService', useExisting
 		AiService,
 		AnnouncementService,
 		AntennaService,
-		AppLockService,
 		AchievementService,
 		AvatarDecorationService,
 		CaptchaService,
@@ -770,7 +765,6 @@ const $ApQuestionService: Provider = { provide: 'ApQuestionService', useExisting
 		$AiService,
 		$AnnouncementService,
 		$AntennaService,
-		$AppLockService,
 		$AchievementService,
 		$AvatarDecorationService,
 		$CaptchaService,

packages/backend/src/core/FetchInstanceMetadataService.ts

@@ -5,9 +5,9 @@
 
 import { URL } from 'node:url';
 import { Inject, Injectable } from '@nestjs/common';
-import { JSDOM } from 'jsdom';
 import tinycolor from 'tinycolor2';
 import * as Redis from 'ioredis';
+import * as htmlParser from 'node-html-parser';
 import type { MiInstance } from '@/models/Instance.js';
 import type Logger from '@/logger.js';
 import { DI } from '@/di-symbols.js';
@@ -15,7 +15,6 @@ import { LoggerService } from '@/core/LoggerService.js';
 import { HttpRequestService } from '@/core/HttpRequestService.js';
 import { bindThis } from '@/decorators.js';
 import { FederatedInstanceService } from '@/core/FederatedInstanceService.js';
-import type { DOMWindow } from 'jsdom';
 
 type NodeInfo = {
 	openRegistrations?: unknown;
@@ -59,7 +58,7 @@ export class FetchInstanceMetadataService {
 		return await this.redisClient.set(
 			`fetchInstanceMetadata:mutex:v2:${host}`, '1',
 			'EX', 30, // 30秒したら自動でロック解除 https://github.com/misskey-dev/misskey/issues/13506#issuecomment-1975375395
-			'GET' // 古い値を返す（なかったらnull）
+			'GET', // 古い値を返す（なかったらnull）
 		);
 	}
 
@@ -181,15 +180,14 @@ export class FetchInstanceMetadataService {
 	}
 
 	@bindThis
-	private async fetchDom(instance: MiInstance): Promise<Document> {
+	private async fetchDom(instance: MiInstance): Promise<htmlParser.HTMLElement> {
 		this.logger.info(`Fetching HTML of ${instance.host} ...`);
 
 		const url = 'https://' + instance.host;
 
 		const html = await this.httpRequestService.getHtml(url);
 
-		const { window } = new JSDOM(html);
-		const doc = window.document;
+		const doc = htmlParser.parse(html);
 
 		return doc;
 	}
@@ -206,12 +204,12 @@ export class FetchInstanceMetadataService {
 	}
 
 	@bindThis
-	private async fetchFaviconUrl(instance: MiInstance, doc: Document | null): Promise<string | null> {
+	private async fetchFaviconUrl(instance: MiInstance, doc: htmlParser.HTMLElement | null): Promise<string | null> {
 		const url = 'https://' + instance.host;
 
 		if (doc) {
 			// https://github.com/misskey-dev/misskey/pull/8220#issuecomment-1025104043
-			const href = Array.from(doc.getElementsByTagName('link')).reverse().find(link => link.relList.contains('icon'))?.href;
+			const href = Array.from(doc.getElementsByTagName('link')).reverse().find(link => link.attributes.rel === 'icon')?.attributes.href;
 
 			if (href) {
 				return (new URL(href, url)).href;
@@ -232,7 +230,7 @@ export class FetchInstanceMetadataService {
 	}
 
 	@bindThis
-	private async fetchIconUrl(instance: MiInstance, doc: Document | null, manifest: Record<string, any> | null): Promise<string | null> {
+	private async fetchIconUrl(instance: MiInstance, doc: htmlParser.HTMLElement | null, manifest: Record<string, any> | null): Promise<string | null> {
 		if (manifest && manifest.icons && manifest.icons.length > 0 && manifest.icons[0].src) {
 			const url = 'https://' + instance.host;
 			return (new URL(manifest.icons[0].src, url)).href;
@@ -246,9 +244,9 @@ export class FetchInstanceMetadataService {
 			// https://github.com/misskey-dev/misskey/pull/8220/files/0ec4eba22a914e31b86874f12448f88b3e58dd5a#r796487559
 			const href =
 				[
-					links.find(link => link.relList.contains('apple-touch-icon-precomposed'))?.href,
-					links.find(link => link.relList.contains('apple-touch-icon'))?.href,
-					links.find(link => link.relList.contains('icon'))?.href,
+					links.find(link => link.attributes.rel?.split(/\s+/).includes('apple-touch-icon-precomposed'))?.attributes.href,
+					links.find(link => link.attributes.rel?.split(/\s+/).includes('apple-touch-icon'))?.attributes.href,
+					links.find(link => link.attributes.rel?.split(/\s+/).includes('icon'))?.attributes.href,
 				]
 					.find(href => href);
 
@@ -261,7 +259,7 @@ export class FetchInstanceMetadataService {
 	}
 
 	@bindThis
-	private async getThemeColor(info: NodeInfo | null, doc: Document | null, manifest: Record<string, any> | null): Promise<string | null> {
+	private async getThemeColor(info: NodeInfo | null, doc: htmlParser.HTMLElement | null, manifest: Record<string, any> | null): Promise<string | null> {
 		const themeColor = info?.metadata?.themeColor ?? doc?.querySelector('meta[name="theme-color"]')?.getAttribute('content') ?? manifest?.theme_color;
 
 		if (themeColor) {
@@ -273,7 +271,7 @@ export class FetchInstanceMetadataService {
 	}
 
 	@bindThis
-	private async getSiteName(info: NodeInfo | null, doc: Document | null, manifest: Record<string, any> | null): Promise<string | null> {
+	private async getSiteName(info: NodeInfo | null, doc: htmlParser.HTMLElement | null, manifest: Record<string, any> | null): Promise<string | null> {
 		if (info && info.metadata) {
 			if (typeof info.metadata.nodeName === 'string') {
 				return info.metadata.nodeName;
@@ -298,7 +296,7 @@ export class FetchInstanceMetadataService {
 	}
 
 	@bindThis
-	private async getDescription(info: NodeInfo | null, doc: Document | null, manifest: Record<string, any> | null): Promise<string | null> {
+	private async getDescription(info: NodeInfo | null, doc: htmlParser.HTMLElement | null, manifest: Record<string, any> | null): Promise<string | null> {
 		if (info && info.metadata) {
 			if (typeof info.metadata.nodeDescription === 'string') {
 				return info.metadata.nodeDescription;

packages/backend/src/core/MfmService.ts

@@ -5,26 +5,19 @@
 
 import { URL } from 'node:url';
 import { Inject, Injectable } from '@nestjs/common';
-import * as parse5 from 'parse5';
-import { type Document, type HTMLParagraphElement, Window, XMLSerializer } from 'happy-dom';
+import * as htmlParser from 'node-html-parser';
 import { DI } from '@/di-symbols.js';
 import type { Config } from '@/config.js';
 import { intersperse } from '@/misc/prelude/array.js';
 import { normalizeForSearch } from '@/misc/normalize-for-search.js';
 import type { IMentionedRemoteUsers } from '@/models/Note.js';
 import { bindThis } from '@/decorators.js';
-import type { DefaultTreeAdapterMap } from 'parse5';
+import { escapeHtml } from '@/misc/escape-html.js';
 import type * as mfm from 'mfm-js';
 
-const treeAdapter = parse5.defaultTreeAdapter;
-type Node = DefaultTreeAdapterMap['node'];
-type ChildNode = DefaultTreeAdapterMap['childNode'];
-
 const urlRegex = /^https?:\/\/[\w\/:%#@$&?!()\[\]~.,=+\-]+/;
 const urlRegexFull = /^https?:\/\/[\w\/:%#@$&?!()\[\]~.,=+\-]+$/;
 
-export type Appender = (document: Document, body: HTMLParagraphElement) => void;
-
 @Injectable()
 export class MfmService {
 	constructor(
@@ -40,68 +33,68 @@ export class MfmService {
 
 		const normalizedHashtagNames = hashtagNames == null ? undefined : new Set<string>(hashtagNames.map(x => normalizeForSearch(x)));
 
-		const dom = parse5.parseFragment(html);
+		const doc = htmlParser.parse(`<div>${html}</div>`);
 
 		let text = '';
 
-		for (const n of dom.childNodes) {
+		for (const n of doc.childNodes) {
 			analyze(n);
 		}
 
 		return text.trim();
 
-		function getText(node: Node): string {
-			if (treeAdapter.isTextNode(node)) return node.value;
-			if (!treeAdapter.isElementNode(node)) return '';
-			if (node.nodeName === 'br') return '\n';
+		function getText(node: htmlParser.Node): string {
+			if (node instanceof htmlParser.TextNode) return node.textContent;
+			if (!(node instanceof htmlParser.HTMLElement)) return '';
+			if (node.tagName === 'BR') return '\n';
 
-			if (node.childNodes) {
+			if (node.childNodes != null) {
 				return node.childNodes.map(n => getText(n)).join('');
 			}
 
 			return '';
 		}
 
-		function appendChildren(childNodes: ChildNode[]): void {
-			if (childNodes) {
+		function analyzeChildren(childNodes: htmlParser.Node[] | null): void {
+			if (childNodes != null) {
 				for (const n of childNodes) {
 					analyze(n);
 				}
 			}
 		}
 
-		function analyze(node: Node) {
-			if (treeAdapter.isTextNode(node)) {
-				text += node.value;
+		function analyze(node: htmlParser.Node) {
+			if (node instanceof htmlParser.TextNode) {
+				text += node.textContent;
 				return;
 			}
 
 			// Skip comment or document type node
-			if (!treeAdapter.isElementNode(node)) {
+			if (!(node instanceof htmlParser.HTMLElement)) {
 				return;
 			}
 
-			switch (node.nodeName) {
-				case 'br': {
+			switch (node.tagName) {
+				case 'BR': {
 					text += '\n';
 					break;
 				}
 
-				case 'a': {
+				case 'A': {
 					const txt = getText(node);
-					const rel = node.attrs.find(x => x.name === 'rel');
-					const href = node.attrs.find(x => x.name === 'href');
+					const rel = node.attributes.rel;
+					const href = node.attributes.href;
 
 					// ハッシュタグ
-					if (normalizedHashtagNames && href && normalizedHashtagNames.has(normalizeForSearch(txt))) {
+					if (normalizedHashtagNames && href != null && normalizedHashtagNames.has(normalizeForSearch(txt))) {
 						text += txt;
 						// メンション
-					} else if (txt.startsWith('@') && !(rel && rel.value.startsWith('me '))) {
+					} else if (txt.startsWith('@') && !(rel != null && rel.startsWith('me '))) {
 						const part = txt.split('@');
 
 						if (part.length === 2 && href) {
 							//#region ホスト名部分が省略されているので復元する
-							const acct = `${txt}@${(new URL(href.value)).hostname}`;
+							const acct = `${txt}@${(new URL(href)).hostname}`;
 							text += acct;
 							//#endregion
 						} else if (part.length === 3) {
@@ -116,17 +109,17 @@ export class MfmService {
 							if (!href) {
 								return txt;
 							}
-							if (!txt || txt === href.value) {	// #6383: Missing text node
-								if (href.value.match(urlRegexFull)) {
-									return href.value;
+							if (!txt || txt === href) {	// #6383: Missing text node
+								if (href.match(urlRegexFull)) {
+									return href;
 								} else {
-									return `<${href.value}>`;
+									return `<${href}>`;
 								}
 							}
-							if (href.value.match(urlRegex) && !href.value.match(urlRegexFull)) {
-								return `[${txt}](<${href.value}>)`;	// #6846
+							if (href.match(urlRegex) && !href.match(urlRegexFull)) {
+								return `[${txt}](<${href}>)`;	// #6846
 							} else {
-								return `[${txt}](${href.value})`;
+								return `[${txt}](${href})`;
 							}
 						};
 
@@ -135,60 +128,64 @@ export class MfmService {
 					break;
 				}
 
-				case 'h1': {
+				case 'H1': {
 					text += '【';
-					appendChildren(node.childNodes);
+					analyzeChildren(node.childNodes);
 					text += '】\n';
 					break;
 				}
 
-				case 'b':
-				case 'strong': {
+				case 'B':
+				case 'STRONG': {
 					text += '**';
-					appendChildren(node.childNodes);
+					analyzeChildren(node.childNodes);
 					text += '**';
 					break;
 				}
 
-				case 'small': {
+				case 'SMALL': {
 					text += '<small>';
-					appendChildren(node.childNodes);
+					analyzeChildren(node.childNodes);
 					text += '</small>';
 					break;
 				}
 
-				case 's':
-				case 'del': {
+				case 'S':
+				case 'DEL': {
 					text += '~~';
-					appendChildren(node.childNodes);
+					analyzeChildren(node.childNodes);
 					text += '~~';
 					break;
 				}
 
-				case 'i':
-				case 'em': {
+				case 'I':
+				case 'EM': {
 					text += '<i>';
-					appendChildren(node.childNodes);
+					analyzeChildren(node.childNodes);
 					text += '</i>';
 					break;
 				}
 
-				case 'ruby': {
+				case 'RUBY': {
 					let ruby: [string, string][] = [];
 					for (const child of node.childNodes) {
-						if (child.nodeName === 'rp') {
+						if ((child instanceof htmlParser.TextNode) && !/\s|\[|\]/.test(child.textContent)) {
+							ruby.push([child.textContent, '']);
 							continue;
 						}
-						if (treeAdapter.isTextNode(child) && !/\s|\[|\]/.test(child.value)) {
-							ruby.push([child.value, '']);
+
+						if (!(child instanceof htmlParser.HTMLElement)) continue;
+
+						if (child.tagName === 'RP') {
 							continue;
 						}
-						if (child.nodeName === 'rt' && ruby.length > 0) {
+
+						if (child.tagName === 'RT' && ruby.length > 0) {
 							const rt = getText(child);
 							if (/\s|\[|\]/.test(rt)) {
 								// If any space is included in rt, it is treated as a normal text
 								ruby = [];
-								appendChildren(node.childNodes);
+								analyzeChildren(node.childNodes);
 								break;
 							} else {
 								ruby.at(-1)![1] = rt;
@@ -197,7 +194,7 @@ export class MfmService {
 						}
 						// If any other element is included in ruby, it is treated as a normal text
 						ruby = [];
-						appendChildren(node.childNodes);
+						analyzeChildren(node.childNodes);
 						break;
 					}
 					for (const [base, rt] of ruby) {
@@ -207,26 +204,30 @@ export class MfmService {
 				}
 
 				// block code (<pre><code>)
-				case 'pre': {
-					if (node.childNodes.length === 1 && node.childNodes[0].nodeName === 'code') {
+				case 'PRE': {
+					if (node.childNodes.length === 1 && (node.childNodes[0] instanceof htmlParser.HTMLElement) && node.childNodes[0].tagName === 'CODE') {
 						text += '\n```\n';
 						text += getText(node.childNodes[0]);
 						text += '\n```\n';
+					} else if (node.childNodes.length === 1 && (node.childNodes[0] instanceof htmlParser.TextNode) && node.childNodes[0].textContent.startsWith('<code>') && node.childNodes[0].textContent.endsWith('</code>')) {
+						text += '\n```\n';
+						text += node.childNodes[0].textContent.slice(6, -7);
+						text += '\n```\n';
 					} else {
-						appendChildren(node.childNodes);
+						analyzeChildren(node.childNodes);
 					}
 					break;
 				}
 
 				// inline code (<code>)
-				case 'code': {
+				case 'CODE': {
 					text += '`';
-					appendChildren(node.childNodes);
+					analyzeChildren(node.childNodes);
 					text += '`';
 					break;
 				}
 
-				case 'blockquote': {
+				case 'BLOCKQUOTE': {
 					const t = getText(node);
 					if (t) {
 						text += '\n> ';
@@ -235,33 +236,33 @@ export class MfmService {
 					break;
 				}
 
-				case 'p':
-				case 'h2':
-				case 'h3':
-				case 'h4':
-				case 'h5':
-				case 'h6': {
+				case 'P':
+				case 'H2':
+				case 'H3':
+				case 'H4':
+				case 'H5':
+				case 'H6': {
 					text += '\n\n';
-					appendChildren(node.childNodes);
+					analyzeChildren(node.childNodes);
 					break;
 				}
 
 				// other block elements
-				case 'div':
-				case 'header':
-				case 'footer':
-				case 'article':
-				case 'li':
-				case 'dt':
-				case 'dd': {
+				case 'DIV':
+				case 'HEADER':
+				case 'FOOTER':
+				case 'ARTICLE':
+				case 'LI':
+				case 'DT':
+				case 'DD': {
 					text += '\n';
-					appendChildren(node.childNodes);
+					analyzeChildren(node.childNodes);
 					break;
 				}
 
 				default:	// includes inline elements
 				{
-					appendChildren(node.childNodes);
+					analyzeChildren(node.childNodes);
 					break;
 				}
 			}
@@ -269,52 +270,35 @@ export class MfmService {
 	}
 
 	@bindThis
-	public toHtml(nodes: mfm.MfmNode[] | null, mentionedRemoteUsers: IMentionedRemoteUsers = [], additionalAppenders: Appender[] = []) {
+	public toHtml(nodes: mfm.MfmNode[] | null, mentionedRemoteUsers: IMentionedRemoteUsers = [], extraHtml: string | null = null) {
 		if (nodes == null) {
 			return null;
 		}
 
-		const { happyDOM, window } = new Window();
-
-		const doc = window.document;
-
-		const body = doc.createElement('p');
-
-		function appendChildren(children: mfm.MfmNode[], targetElement: any): void {
-			if (children) {
-				for (const child of children.map(x => (handlers as any)[x.type](x))) targetElement.appendChild(child);
-			}
+		function toHtml(children?: mfm.MfmNode[]): string {
+			if (children == null) return '';
+			return children.map(x => handlers[x.type](x)).join('');
 		}
 
 		function fnDefault(node: mfm.MfmFn) {
-			const el = doc.createElement('i');
-			appendChildren(node.children, el);
-			return el;
+			return `<i>${toHtml(node.children)}</i>`;
 		}
 
-		const handlers: { [K in mfm.MfmNode['type']]: (node: mfm.NodeType<K>) => any } = {
+		const handlers = {
 			bold: (node) => {
-				const el = doc.createElement('b');
-				appendChildren(node.children, el);
-				return el;
+				return `<b>${toHtml(node.children)}</b>`;
 			},
 
 			small: (node) => {
-				const el = doc.createElement('small');
-				appendChildren(node.children, el);
-				return el;
+				return `<small>${toHtml(node.children)}</small>`;
 			},
 
 			strike: (node) => {
-				const el = doc.createElement('del');
-				appendChildren(node.children, el);
-				return el;
+				return `<del>${toHtml(node.children)}</del>`;
 			},
 
 			italic: (node) => {
-				const el = doc.createElement('i');
-				appendChildren(node.children, el);
-				return el;
+				return `<i>${toHtml(node.children)}</i>`;
 			},
 
 			fn: (node) => {
@@ -323,10 +307,7 @@ export class MfmService {
 						const text = node.children[0].type === 'text' ? node.children[0].props.text : '';
 						try {
 							const date = new Date(parseInt(text, 10) * 1000);
-							const el = doc.createElement('time');
-							el.setAttribute('datetime', date.toISOString());
-							el.textContent = date.toISOString();
-							return el;
+							return `<time datetime="${escapeHtml(date.toISOString())}">${escapeHtml(date.toISOString())}</time>`;
 						} catch (err) {
 							return fnDefault(node);
 						}
@@ -336,21 +317,9 @@ export class MfmService {
 						if (node.children.length === 1) {
 							const child = node.children[0];
 							const text = child.type === 'text' ? child.props.text : '';
-							const rubyEl = doc.createElement('ruby');
-							const rtEl = doc.createElement('rt');
 
-							// ruby未対応のHTMLサニタイザーを通したときにルビが「劉備（りゅうび）」となるようにする
-							const rpStartEl = doc.createElement('rp');
-							rpStartEl.appendChild(doc.createTextNode('('));
-							const rpEndEl = doc.createElement('rp');
-							rpEndEl.appendChild(doc.createTextNode(')'));
-
-							rubyEl.appendChild(doc.createTextNode(text.split(' ')[0]));
-							rtEl.appendChild(doc.createTextNode(text.split(' ')[1]));
-							rubyEl.appendChild(rpStartEl);
-							rubyEl.appendChild(rtEl);
-							rubyEl.appendChild(rpEndEl);
-							return rubyEl;
+							// ruby未対応のHTMLサニタイザーを通したときにルビが「対象テキスト（ルビテキスト）」にフォールバックするようにする
+							return `<ruby>${escapeHtml(text.split(' ')[0])}<rp>(</rp><rt>${escapeHtml(text.split(' ')[1])}</rt><rp>)</rp></ruby>`;
 						} else {
 							const rt = node.children.at(-1);
 
@@ -359,21 +328,9 @@ export class MfmService {
 							}
 
 							const text = rt.type === 'text' ? rt.props.text : '';
-							const rubyEl = doc.createElement('ruby');
-							const rtEl = doc.createElement('rt');
 
-							// ruby未対応のHTMLサニタイザーを通したときにルビが「劉備（りゅうび）」となるようにする
-							const rpStartEl = doc.createElement('rp');
-							rpStartEl.appendChild(doc.createTextNode('('));
-							const rpEndEl = doc.createElement('rp');
-							rpEndEl.appendChild(doc.createTextNode(')'));
-
-							appendChildren(node.children.slice(0, node.children.length - 1), rubyEl);
-							rtEl.appendChild(doc.createTextNode(text.trim()));
-							rubyEl.appendChild(rpStartEl);
-							rubyEl.appendChild(rtEl);
-							rubyEl.appendChild(rpEndEl);
-							return rubyEl;
+							// ruby未対応のHTMLサニタイザーを通したときにルビが「対象テキスト（ルビテキスト）」にフォールバックするようにする
+							return `<ruby>${toHtml(node.children.slice(0, node.children.length - 1))}<rp>(</rp><rt>${escapeHtml(text.trim())}</rt><rp>)</rp></ruby>`;
 						}
 					}
 
@@ -384,125 +341,98 @@ export class MfmService {
 			},
 
 			blockCode: (node) => {
-				const pre = doc.createElement('pre');
-				const inner = doc.createElement('code');
-				inner.textContent = node.props.code;
-				pre.appendChild(inner);
-				return pre;
+				return `<pre><code>${escapeHtml(node.props.code)}</code></pre>`;
 			},
 
 			center: (node) => {
-				const el = doc.createElement('div');
-				appendChildren(node.children, el);
-				return el;
+				return `<div style="text-align: center;">${toHtml(node.children)}</div>`;
 			},
 
 			emojiCode: (node) => {
-				return doc.createTextNode(`\u200B:${node.props.name}:\u200B`);
+				return `\u200B:${escapeHtml(node.props.name)}:\u200B`;
 			},
 
 			unicodeEmoji: (node) => {
-				return doc.createTextNode(node.props.emoji);
+				return node.props.emoji;
 			},
 
 			hashtag: (node) => {
-				const a = doc.createElement('a');
-				a.setAttribute('href', `${this.config.url}/tags/${node.props.hashtag}`);
-				a.textContent = `#${node.props.hashtag}`;
-				a.setAttribute('rel', 'tag');
-				return a;
+				return `<a href="${escapeHtml(`${this.config.url}/tags/${encodeURIComponent(node.props.hashtag)}`)}" rel="tag">#${escapeHtml(node.props.hashtag)}</a>`;
 			},
 
 			inlineCode: (node) => {
-				const el = doc.createElement('code');
-				el.textContent = node.props.code;
-				return el;
+				return `<code>${escapeHtml(node.props.code)}</code>`;
 			},
 
 			mathInline: (node) => {
-				const el = doc.createElement('code');
-				el.textContent = node.props.formula;
-				return el;
+				return `<code>${escapeHtml(node.props.formula)}</code>`;
 			},
 
 			mathBlock: (node) => {
-				const el = doc.createElement('code');
-				el.textContent = node.props.formula;
-				return el;
+				return `<pre><code>${escapeHtml(node.props.formula)}</code></pre>`;
 			},
 
 			link: (node) => {
-				const a = doc.createElement('a');
-				a.setAttribute('href', node.props.url);
-				appendChildren(node.children, a);
-				return a;
+				try {
+					const url = new URL(node.props.url);
+					return `<a href="${escapeHtml(url.href)}">${toHtml(node.children)}</a>`;
+				} catch (err) {
+					return `[${toHtml(node.children)}](${escapeHtml(node.props.url)})`;
+				}
 			},
 
 			mention: (node) => {
-				const a = doc.createElement('a');
 				const { username, host, acct } = node.props;
 				const remoteUserInfo = mentionedRemoteUsers.find(remoteUser => remoteUser.username.toLowerCase() === username.toLowerCase() && remoteUser.host?.toLowerCase() === host?.toLowerCase());
-				a.setAttribute('href', remoteUserInfo
+				const href = remoteUserInfo
 					? (remoteUserInfo.url ? remoteUserInfo.url : remoteUserInfo.uri)
-					: `${this.config.url}/${acct.endsWith(`@${this.config.url}`) ? acct.substring(0, acct.length - this.config.url.length - 1) : acct}`);
-				a.className = 'u-url mention';
-				a.textContent = acct;
-				return a;
+					: `${this.config.url}/${acct.endsWith(`@${this.config.url}`) ? acct.substring(0, acct.length - this.config.url.length - 1) : acct}`;
+				try {
+					const url = new URL(href);
+					return `<a href="${escapeHtml(url.href)}" class="u-url mention">${escapeHtml(acct)}</a>`;
+				} catch (err) {
+					return escapeHtml(acct);
+				}
 			},
 
 			quote: (node) => {
-				const el = doc.createElement('blockquote');
-				appendChildren(node.children, el);
-				return el;
+				return `<blockquote>${toHtml(node.children)}</blockquote>`;
 			},
 
 			text: (node) => {
 				if (!node.props.text.match(/[\r\n]/)) {
-					return doc.createTextNode(node.props.text);
+					return escapeHtml(node.props.text);
 				}
 
-				const el = doc.createElement('span');
-				const nodes = node.props.text.split(/\r\n|\r|\n/).map(x => doc.createTextNode(x));
+				let html = '';
 
-				for (const x of intersperse<FIXME | 'br'>('br', nodes)) {
-					el.appendChild(x === 'br' ? doc.createElement('br') : x);
+				const lines = node.props.text.split(/\r\n|\r|\n/).map(x => escapeHtml(x));
+
+				for (const x of intersperse<FIXME | 'br'>('br', lines)) {
+					html += x === 'br' ? '<br />' : x;
 				}
 
-				return el;
+				return html;
 			},
 
 			url: (node) => {
-				const a = doc.createElement('a');
-				a.setAttribute('href', node.props.url);
-				a.textContent = node.props.url;
-				return a;
+				try {
+					const url = new URL(node.props.url);
+					return `<a href="${escapeHtml(url.href)}">${escapeHtml(node.props.url)}</a>`;
+				} catch (err) {
+					return escapeHtml(node.props.url);
+				}
 			},
 
 			search: (node) => {
-				const a = doc.createElement('a');
-				a.setAttribute('href', `https://www.google.com/search?q=${node.props.query}`);
-				a.textContent = node.props.content;
-				return a;
+				return `<a href="${escapeHtml(`https://www.google.com/search?q=${encodeURIComponent(node.props.query)}`)}">${escapeHtml(node.props.content)}</a>`;
 			},
 
 			plain: (node) => {
-				const el = doc.createElement('span');
-				appendChildren(node.children, el);
-				return el;
+				return `<span>${toHtml(node.children)}</span>`;
 			},
-		};
+		} satisfies { [K in mfm.MfmNode['type']]: (node: mfm.NodeType<K>) => string } as { [K in mfm.MfmNode['type']]: (node: mfm.MfmNode) => string };
 
-		appendChildren(nodes, body);
-
-		for (const additionalAppender of additionalAppenders) {
-			additionalAppender(doc, body);
-		}
-
-		// Remove the unnecessary namespace
-		const serialized = new XMLSerializer().serializeToString(body).replace(/^\s*<p xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">/, '<p>');
-
-		happyDOM.close().catch(err => {});
-
-		return serialized;
+		return `${toHtml(nodes)}${extraHtml ?? ''}`;
 	}
 }

packages/backend/src/core/NotificationService.ts

@@ -203,7 +203,7 @@ export class NotificationService implements OnApplicationShutdown {
 	}
 
 	// TODO
-	//const locales = await import('../../../../locales/index.js');
+	//const locales = await import('i18n');
 
 	// TODO: locale ファイルをクライアント用とサーバー用で分けたい
 
@@ -272,7 +272,7 @@ export class NotificationService implements OnApplicationShutdown {
 		let untilTime = untilId ? this.toXListId(untilId) : null;
 
 		let notifications: MiNotification[];
-		for (;;) {
+		for (; ;) {
 			let notificationsRes: [id: string, fields: string[]][];
 
 			// sinceidのみの場合は古い順、そうでない場合は新しい順。 QueryService.makePaginationQueryも参照

packages/backend/src/core/WebAuthnService.ts

@@ -66,7 +66,6 @@ export class WebAuthnService {
 			userID: isoUint8Array.fromUTF8String(userId),
 			userName: userName,
 			userDisplayName: userDisplayName,
-			attestationType: 'indirect',
 			excludeCredentials: keys.map(key => (<{ id: string; transports?: AuthenticatorTransportFuture[]; }>{
 				id: key.id,
 				transports: key.transports ?? undefined,

packages/backend/src/core/activitypub/ApInboxService.ts

@@ -5,6 +5,7 @@
 
 import { Inject, Injectable } from '@nestjs/common';
 import { In } from 'typeorm';
+import * as Redis from 'ioredis';
 import { DI } from '@/di-symbols.js';
 import type { Config } from '@/config.js';
 import { UserFollowingService } from '@/core/UserFollowingService.js';
@@ -14,8 +15,8 @@ import { NotePiningService } from '@/core/NotePiningService.js';
 import { UserBlockingService } from '@/core/UserBlockingService.js';
 import { NoteDeleteService } from '@/core/NoteDeleteService.js';
 import { NoteCreateService } from '@/core/NoteCreateService.js';
+import { acquireApObjectLock } from '@/misc/distributed-lock.js';
 import { concat, toArray, toSingle, unique } from '@/misc/prelude/array.js';
-import { AppLockService } from '@/core/AppLockService.js';
 import type Logger from '@/logger.js';
 import { IdService } from '@/core/IdService.js';
 import { StatusError } from '@/misc/status-error.js';
@@ -48,8 +49,8 @@ export class ApInboxService {
 		@Inject(DI.config)
 		private config: Config,
 
-		@Inject(DI.meta)
-		private meta: MiMeta,
+		@Inject(DI.redis)
+		private redisClient: Redis.Redis,
 
 		@Inject(DI.usersRepository)
 		private usersRepository: UsersRepository,
@@ -76,7 +77,6 @@ export class ApInboxService {
 		private userBlockingService: UserBlockingService,
 		private noteCreateService: NoteCreateService,
 		private noteDeleteService: NoteDeleteService,
-		private appLockService: AppLockService,
 		private apResolverService: ApResolverService,
 		private apDbResolverService: ApDbResolverService,
 		private apLoggerService: ApLoggerService,
@@ -311,7 +311,7 @@ export class ApInboxService {
 		// アナウンス先が許可されているかチェック
 		if (!this.utilityService.isFederationAllowedUri(uri)) return;
 
-		const unlock = await this.appLockService.getApLock(uri);
+		const unlock = await acquireApObjectLock(this.redisClient, uri);
 
 		try {
 			// 既に同じURIを持つものが登録されていないかチェック
@@ -438,7 +438,7 @@ export class ApInboxService {
 			}
 		}
 
-		const unlock = await this.appLockService.getApLock(uri);
+		const unlock = await acquireApObjectLock(this.redisClient, uri);
 
 		try {
 			const exist = await this.apNoteService.fetchNote(note);
@@ -522,7 +522,7 @@ export class ApInboxService {
 	private async deleteNote(actor: MiRemoteUser, uri: string): Promise<string> {
 		this.logger.info(`Deleting the Note: ${uri}`);
 
-		const unlock = await this.appLockService.getApLock(uri);
+		const unlock = await acquireApObjectLock(this.redisClient, uri);
 
 		try {
 			const note = await this.apDbResolverService.getNoteFromApId(uri);

packages/backend/src/core/activitypub/ApMfmService.ts

@@ -5,7 +5,7 @@
 
 import { Injectable } from '@nestjs/common';
 import * as mfm from 'mfm-js';
-import { MfmService, Appender } from '@/core/MfmService.js';
+import { MfmService } from '@/core/MfmService.js';
 import type { MiNote } from '@/models/Note.js';
 import { bindThis } from '@/decorators.js';
 import { extractApHashtagObjects } from './models/tag.js';
@@ -25,17 +25,17 @@ export class ApMfmService {
 	}
 
 	@bindThis
-	public getNoteHtml(note: Pick<MiNote, 'text' | 'mentionedRemoteUsers'>, additionalAppender: Appender[] = []) {
+	public getNoteHtml(note: Pick<MiNote, 'text' | 'mentionedRemoteUsers'>, extraHtml: string | null = null) {
 		let noMisskeyContent = false;
 		const srcMfm = (note.text ?? '');
 
 		const parsed = mfm.parse(srcMfm);
 
-		if (!additionalAppender.length && parsed.every(n => ['text', 'unicodeEmoji', 'emojiCode', 'mention', 'hashtag', 'url'].includes(n.type))) {
+		if (extraHtml == null && parsed.every(n => ['text', 'unicodeEmoji', 'emojiCode', 'mention', 'hashtag', 'url'].includes(n.type))) {
 			noMisskeyContent = true;
 		}
 
-		const content = this.mfmService.toHtml(parsed, JSON.parse(note.mentionedRemoteUsers), additionalAppender);
+		const content = this.mfmService.toHtml(parsed, JSON.parse(note.mentionedRemoteUsers), extraHtml);
 
 		return {
 			content,

packages/backend/src/core/activitypub/ApRendererService.ts

@@ -19,7 +19,7 @@ import type { MiEmoji } from '@/models/Emoji.js';
 import type { MiPoll } from '@/models/Poll.js';
 import type { MiPollVote } from '@/models/PollVote.js';
 import { UserKeypairService } from '@/core/UserKeypairService.js';
-import { MfmService, type Appender } from '@/core/MfmService.js';
+import { MfmService } from '@/core/MfmService.js';
 import { UserEntityService } from '@/core/entities/UserEntityService.js';
 import { DriveFileEntityService } from '@/core/entities/DriveFileEntityService.js';
 import type { MiUserKeypair } from '@/models/UserKeypair.js';
@@ -28,6 +28,7 @@ import { bindThis } from '@/decorators.js';
 import { CustomEmojiService } from '@/core/CustomEmojiService.js';
 import { IdService } from '@/core/IdService.js';
 import { UtilityService } from '@/core/UtilityService.js';
+import { escapeHtml } from '@/misc/escape-html.js';
 import { JsonLdService } from './JsonLdService.js';
 import { ApMfmService } from './ApMfmService.js';
 import { CONTEXT } from './misc/contexts.js';
@@ -384,7 +385,7 @@ export class ApRendererService {
 			inReplyTo = null;
 		}
 
-		let quote;
+		let quote: string | undefined;
 
 		if (note.renoteId) {
 			const renote = await this.notesRepository.findOneBy({ id: note.renoteId });
@@ -430,29 +431,18 @@ export class ApRendererService {
 			poll = await this.pollsRepository.findOneBy({ noteId: note.id });
 		}
 
-		const apAppend: Appender[] = [];
+		let extraHtml: string | null = null;
 
-		if (quote) {
+		if (quote != null) {
 			// Append quote link as `<br><br><span class="quote-inline">RE: <a href="...">...</a></span>`
-			// the claas name `quote-inline` is used in non-misskey clients for styling quote notes.
+			// the class name `quote-inline` is used in non-misskey clients for styling quote notes.
 			// For compatibility, the span part should be kept as possible.
-			apAppend.push((doc, body) => {
-				body.appendChild(doc.createElement('br'));
-				body.appendChild(doc.createElement('br'));
-				const span = doc.createElement('span');
-				span.className = 'quote-inline';
-				span.appendChild(doc.createTextNode('RE: '));
-				const link = doc.createElement('a');
-				link.setAttribute('href', quote);
-				link.textContent = quote;
-				span.appendChild(link);
-				body.appendChild(span);
-			});
+			extraHtml = `<br><br><span class="quote-inline">RE: <a href="${escapeHtml(quote)}">${escapeHtml(quote)}</a></span>`;
 		}
 
 		const summary = note.cw === '' ? String.fromCharCode(0x200B) : note.cw;
 
-		const { content, noMisskeyContent } = this.apMfmService.getNoteHtml(note, apAppend);
+		const { content, noMisskeyContent } = this.apMfmService.getNoteHtml(note, extraHtml);
 
 		const emojis = await this.getEmojis(note.emojis);
 		const apemojis = emojis.filter(emoji => !emoji.localOnly).map(emoji => this.renderEmoji(emoji));

packages/backend/src/core/activitypub/ApRequestService.ts

@@ -6,7 +6,7 @@
 import * as crypto from 'node:crypto';
 import { URL } from 'node:url';
 import { Inject, Injectable } from '@nestjs/common';
-import { Window } from 'happy-dom';
+import * as htmlParser from 'node-html-parser';
 import { DI } from '@/di-symbols.js';
 import type { Config } from '@/config.js';
 import type { MiUser } from '@/models/User.js';
@@ -215,29 +215,9 @@ export class ApRequestService {
 			_followAlternate === true
 		) {
 			const html = await res.text();
-			const { window, happyDOM } = new Window({
-				settings: {
-					disableJavaScriptEvaluation: true,
-					disableJavaScriptFileLoading: true,
-					disableCSSFileLoading: true,
-					disableComputedStyleRendering: true,
-					handleDisabledFileLoadingAsSuccess: true,
-					navigation: {
-						disableMainFrameNavigation: true,
-						disableChildFrameNavigation: true,
-						disableChildPageNavigation: true,
-						disableFallbackToSetURL: true,
-					},
-					timer: {
-						maxTimeout: 0,
-						maxIntervalTime: 0,
-						maxIntervalIterations: 0,
-					},
-				},
-			});
-			const document = window.document;
+
 			try {
-				document.documentElement.innerHTML = html;
+				const document = htmlParser.parse(html);
 
 				const alternate = document.querySelector('head > link[rel="alternate"][type="application/activity+json"]');
 				if (alternate) {
@@ -248,8 +228,6 @@ export class ApRequestService {
 				}
 			} catch (e) {
 				// something went wrong parsing the HTML, ignore the whole thing
-			} finally {
-				happyDOM.close().catch(err => {});
 			}
 		}
 		//#endregion

packages/backend/src/core/activitypub/models/ApNoteService.ts

@@ -5,14 +5,15 @@
 
 import { forwardRef, Inject, Injectable } from '@nestjs/common';
 import { In } from 'typeorm';
+import * as Redis from 'ioredis';
 import { DI } from '@/di-symbols.js';
 import type { PollsRepository, EmojisRepository, MiMeta } from '@/models/_.js';
 import type { Config } from '@/config.js';
 import type { MiRemoteUser } from '@/models/User.js';
 import type { MiNote } from '@/models/Note.js';
+import { acquireApObjectLock } from '@/misc/distributed-lock.js';
 import { toArray, toSingle, unique } from '@/misc/prelude/array.js';
 import type { MiEmoji } from '@/models/Emoji.js';
-import { AppLockService } from '@/core/AppLockService.js';
 import type { MiDriveFile } from '@/models/DriveFile.js';
 import { NoteCreateService } from '@/core/NoteCreateService.js';
 import type Logger from '@/logger.js';
@@ -48,6 +49,9 @@ export class ApNoteService {
 		@Inject(DI.meta)
 		private meta: MiMeta,
 
+		@Inject(DI.redis)
+		private redisClient: Redis.Redis,
+
 		@Inject(DI.pollsRepository)
 		private pollsRepository: PollsRepository,
 
@@ -67,7 +71,6 @@ export class ApNoteService {
 		private apMentionService: ApMentionService,
 		private apImageService: ApImageService,
 		private apQuestionService: ApQuestionService,
-		private appLockService: AppLockService,
 		private pollService: PollService,
 		private noteCreateService: NoteCreateService,
 		private apDbResolverService: ApDbResolverService,
@@ -354,7 +357,7 @@ export class ApNoteService {
 			throw new StatusError('blocked host', 451);
 		}
 
-		const unlock = await this.appLockService.getApLock(uri);
+		const unlock = await acquireApObjectLock(this.redisClient, uri);
 
 		try {
 			//#region このサーバーに既に登録されていたらそれを返す

packages/backend/src/core/chart/charts/active-users.ts

@@ -5,11 +5,12 @@
 
 import { Injectable, Inject } from '@nestjs/common';
 import { DataSource } from 'typeorm';
-import { AppLockService } from '@/core/AppLockService.js';
+import * as Redis from 'ioredis';
 import type { MiUser } from '@/models/User.js';
 import { DI } from '@/di-symbols.js';
 import { bindThis } from '@/decorators.js';
 import { IdService } from '@/core/IdService.js';
+import { acquireChartInsertLock } from '@/misc/distributed-lock.js';
 import Chart from '../core.js';
 import { ChartLoggerService } from '../ChartLoggerService.js';
 import { name, schema } from './entities/active-users.js';
@@ -28,11 +29,13 @@ export default class ActiveUsersChart extends Chart<typeof schema> { // eslint-d
 		@Inject(DI.db)
 		private db: DataSource,
 
-		private appLockService: AppLockService,
+		@Inject(DI.redis)
+		private redisClient: Redis.Redis,
+
 		private chartLoggerService: ChartLoggerService,
 		private idService: IdService,
 	) {
-		super(db, (k) => appLockService.getChartInsertLock(k), chartLoggerService.logger, name, schema);
+		super(db, (k) => acquireChartInsertLock(redisClient, k), chartLoggerService.logger, name, schema);
 	}
 
 	protected async tickMajor(): Promise<Partial<KVs<typeof schema>>> {

packages/backend/src/core/chart/charts/ap-request.ts

@@ -5,9 +5,10 @@
 
 import { Injectable, Inject } from '@nestjs/common';
 import { DataSource } from 'typeorm';
-import { AppLockService } from '@/core/AppLockService.js';
+import * as Redis from 'ioredis';
 import { DI } from '@/di-symbols.js';
 import { bindThis } from '@/decorators.js';
+import { acquireChartInsertLock } from '@/misc/distributed-lock.js';
 import Chart from '../core.js';
 import { ChartLoggerService } from '../ChartLoggerService.js';
 import { name, schema } from './entities/ap-request.js';
@@ -22,10 +23,12 @@ export default class ApRequestChart extends Chart<typeof schema> { // eslint-dis
 		@Inject(DI.db)
 		private db: DataSource,
 
-		private appLockService: AppLockService,
+		@Inject(DI.redis)
+		private redisClient: Redis.Redis,
+
 		private chartLoggerService: ChartLoggerService,
 	) {
-		super(db, (k) => appLockService.getChartInsertLock(k), chartLoggerService.logger, name, schema);
+		super(db, (k) => acquireChartInsertLock(redisClient, k), chartLoggerService.logger, name, schema);
 	}
 
 	protected async tickMajor(): Promise<Partial<KVs<typeof schema>>> {

packages/backend/src/core/chart/charts/drive.ts

@@ -5,10 +5,11 @@
 
 import { Injectable, Inject } from '@nestjs/common';
 import { DataSource } from 'typeorm';
+import * as Redis from 'ioredis';
 import type { MiDriveFile } from '@/models/DriveFile.js';
-import { AppLockService } from '@/core/AppLockService.js';
 import { DI } from '@/di-symbols.js';
 import { bindThis } from '@/decorators.js';
+import { acquireChartInsertLock } from '@/misc/distributed-lock.js';
 import Chart from '../core.js';
 import { ChartLoggerService } from '../ChartLoggerService.js';
 import { name, schema } from './entities/drive.js';
@@ -23,10 +24,12 @@ export default class DriveChart extends Chart<typeof schema> { // eslint-disable
 		@Inject(DI.db)
 		private db: DataSource,
 
-		private appLockService: AppLockService,
+		@Inject(DI.redis)
+		private redisClient: Redis.Redis,
+
 		private chartLoggerService: ChartLoggerService,
 	) {
-		super(db, (k) => appLockService.getChartInsertLock(k), chartLoggerService.logger, name, schema);
+		super(db, (k) => acquireChartInsertLock(redisClient, k), chartLoggerService.logger, name, schema);
 	}
 
 	protected async tickMajor(): Promise<Partial<KVs<typeof schema>>> {

packages/backend/src/core/chart/charts/federation.ts

@@ -5,10 +5,11 @@
 
 import { Injectable, Inject } from '@nestjs/common';
 import { DataSource } from 'typeorm';
+import * as Redis from 'ioredis';
 import type { FollowingsRepository, InstancesRepository, MiMeta } from '@/models/_.js';
-import { AppLockService } from '@/core/AppLockService.js';
 import { DI } from '@/di-symbols.js';
 import { bindThis } from '@/decorators.js';
+import { acquireChartInsertLock } from '@/misc/distributed-lock.js';
 import Chart from '../core.js';
 import { ChartLoggerService } from '../ChartLoggerService.js';
 import { name, schema } from './entities/federation.js';
@@ -26,16 +27,18 @@ export default class FederationChart extends Chart<typeof schema> { // eslint-di
 		@Inject(DI.meta)
 		private meta: MiMeta,
 
+		@Inject(DI.redis)
+		private redisClient: Redis.Redis,
+
 		@Inject(DI.followingsRepository)
 		private followingsRepository: FollowingsRepository,
 
 		@Inject(DI.instancesRepository)
 		private instancesRepository: InstancesRepository,
 
-		private appLockService: AppLockService,
 		private chartLoggerService: ChartLoggerService,
 	) {
-		super(db, (k) => appLockService.getChartInsertLock(k), chartLoggerService.logger, name, schema);
+		super(db, (k) => acquireChartInsertLock(redisClient, k), chartLoggerService.logger, name, schema);
 	}
 
 	protected async tickMajor(): Promise<Partial<KVs<typeof schema>>> {

packages/backend/src/core/chart/charts/instance.ts

@@ -5,13 +5,14 @@
 
 import { Injectable, Inject } from '@nestjs/common';
 import { DataSource } from 'typeorm';
+import * as Redis from 'ioredis';
 import type { DriveFilesRepository, FollowingsRepository, UsersRepository, NotesRepository } from '@/models/_.js';
 import type { MiDriveFile } from '@/models/DriveFile.js';
 import type { MiNote } from '@/models/Note.js';
-import { AppLockService } from '@/core/AppLockService.js';
 import { DI } from '@/di-symbols.js';
 import { UtilityService } from '@/core/UtilityService.js';
 import { bindThis } from '@/decorators.js';
+import { acquireChartInsertLock } from '@/misc/distributed-lock.js';
 import Chart from '../core.js';
 import { ChartLoggerService } from '../ChartLoggerService.js';
 import { name, schema } from './entities/instance.js';
@@ -26,6 +27,9 @@ export default class InstanceChart extends Chart<typeof schema> { // eslint-disa
 		@Inject(DI.db)
 		private db: DataSource,
 
+		@Inject(DI.redis)
+		private redisClient: Redis.Redis,
+
 		@Inject(DI.usersRepository)
 		private usersRepository: UsersRepository,
 
@@ -39,10 +43,9 @@ export default class InstanceChart extends Chart<typeof schema> { // eslint-disa
 		private followingsRepository: FollowingsRepository,
 
 		private utilityService: UtilityService,
-		private appLockService: AppLockService,
 		private chartLoggerService: ChartLoggerService,
 	) {
-		super(db, (k) => appLockService.getChartInsertLock(k), chartLoggerService.logger, name, schema, true);
+		super(db, (k) => acquireChartInsertLock(redisClient, k), chartLoggerService.logger, name, schema, true);
 	}
 
 	protected async tickMajor(group: string): Promise<Partial<KVs<typeof schema>>> {

packages/backend/src/core/chart/charts/notes.ts

@@ -5,11 +5,12 @@
 
 import { Injectable, Inject } from '@nestjs/common';
 import { Not, IsNull, DataSource } from 'typeorm';
+import * as Redis from 'ioredis';
 import type { NotesRepository } from '@/models/_.js';
 import type { MiNote } from '@/models/Note.js';
-import { AppLockService } from '@/core/AppLockService.js';
 import { DI } from '@/di-symbols.js';
 import { bindThis } from '@/decorators.js';
+import { acquireChartInsertLock } from '@/misc/distributed-lock.js';
 import Chart from '../core.js';
 import { ChartLoggerService } from '../ChartLoggerService.js';
 import { name, schema } from './entities/notes.js';
@@ -24,13 +25,15 @@ export default class NotesChart extends Chart<typeof schema> { // eslint-disable
 		@Inject(DI.db)
 		private db: DataSource,
 
+		@Inject(DI.redis)
+		private redisClient: Redis.Redis,
+
 		@Inject(DI.notesRepository)
 		private notesRepository: NotesRepository,
 
-		private appLockService: AppLockService,
 		private chartLoggerService: ChartLoggerService,
 	) {
-		super(db, (k) => appLockService.getChartInsertLock(k), chartLoggerService.logger, name, schema);
+		super(db, (k) => acquireChartInsertLock(redisClient, k), chartLoggerService.logger, name, schema);
 	}
 
 	protected async tickMajor(): Promise<Partial<KVs<typeof schema>>> {

packages/backend/src/core/chart/charts/per-user-drive.ts

@@ -5,12 +5,13 @@
 
 import { Injectable, Inject } from '@nestjs/common';
 import { DataSource } from 'typeorm';
+import * as Redis from 'ioredis';
 import type { DriveFilesRepository } from '@/models/_.js';
 import type { MiDriveFile } from '@/models/DriveFile.js';
-import { AppLockService } from '@/core/AppLockService.js';
 import { DI } from '@/di-symbols.js';
 import { DriveFileEntityService } from '@/core/entities/DriveFileEntityService.js';
 import { bindThis } from '@/decorators.js';
+import { acquireChartInsertLock } from '@/misc/distributed-lock.js';
 import Chart from '../core.js';
 import { ChartLoggerService } from '../ChartLoggerService.js';
 import { name, schema } from './entities/per-user-drive.js';
@@ -25,14 +26,16 @@ export default class PerUserDriveChart extends Chart<typeof schema> { // eslint-
 		@Inject(DI.db)
 		private db: DataSource,
 
+		@Inject(DI.redis)
+		private redisClient: Redis.Redis,
+
 		@Inject(DI.driveFilesRepository)
 		private driveFilesRepository: DriveFilesRepository,
 
-		private appLockService: AppLockService,
 		private driveFileEntityService: DriveFileEntityService,
 		private chartLoggerService: ChartLoggerService,
 	) {
-		super(db, (k) => appLockService.getChartInsertLock(k), chartLoggerService.logger, name, schema, true);
+		super(db, (k) => acquireChartInsertLock(redisClient, k), chartLoggerService.logger, name, schema, true);
 	}
 
 	protected async tickMajor(group: string): Promise<Partial<KVs<typeof schema>>> {

packages/backend/src/core/chart/charts/per-user-following.ts

@@ -5,12 +5,13 @@
 
 import { Injectable, Inject } from '@nestjs/common';
 import { Not, IsNull, DataSource } from 'typeorm';
+import * as Redis from 'ioredis';
 import type { MiUser } from '@/models/User.js';
-import { AppLockService } from '@/core/AppLockService.js';
 import { DI } from '@/di-symbols.js';
 import { UserEntityService } from '@/core/entities/UserEntityService.js';
 import type { FollowingsRepository } from '@/models/_.js';
 import { bindThis } from '@/decorators.js';
+import { acquireChartInsertLock } from '@/misc/distributed-lock.js';
 import Chart from '../core.js';
 import { ChartLoggerService } from '../ChartLoggerService.js';
 import { name, schema } from './entities/per-user-following.js';
@@ -25,14 +26,16 @@ export default class PerUserFollowingChart extends Chart<typeof schema> { // esl
 		@Inject(DI.db)
 		private db: DataSource,
 
+		@Inject(DI.redis)
+		private redisClient: Redis.Redis,
+
 		@Inject(DI.followingsRepository)
 		private followingsRepository: FollowingsRepository,
 
-		private appLockService: AppLockService,
 		private userEntityService: UserEntityService,
 		private chartLoggerService: ChartLoggerService,
 	) {
-		super(db, (k) => appLockService.getChartInsertLock(k), chartLoggerService.logger, name, schema, true);
+		super(db, (k) => acquireChartInsertLock(redisClient, k), chartLoggerService.logger, name, schema, true);
 	}
 
 	protected async tickMajor(group: string): Promise<Partial<KVs<typeof schema>>> {

packages/backend/src/core/chart/charts/per-user-notes.ts

@@ -5,12 +5,13 @@
 
 import { Injectable, Inject } from '@nestjs/common';
 import { DataSource } from 'typeorm';
+import * as Redis from 'ioredis';
 import type { MiUser } from '@/models/User.js';
 import type { MiNote } from '@/models/Note.js';
-import { AppLockService } from '@/core/AppLockService.js';
 import { DI } from '@/di-symbols.js';
 import type { NotesRepository } from '@/models/_.js';
 import { bindThis } from '@/decorators.js';
+import { acquireChartInsertLock } from '@/misc/distributed-lock.js';
 import Chart from '../core.js';
 import { ChartLoggerService } from '../ChartLoggerService.js';
 import { name, schema } from './entities/per-user-notes.js';
@@ -25,13 +26,15 @@ export default class PerUserNotesChart extends Chart<typeof schema> { // eslint-
 		@Inject(DI.db)
 		private db: DataSource,
 
+		@Inject(DI.redis)
+		private redisClient: Redis.Redis,
+
 		@Inject(DI.notesRepository)
 		private notesRepository: NotesRepository,
 
-		private appLockService: AppLockService,
 		private chartLoggerService: ChartLoggerService,
 	) {
-		super(db, (k) => appLockService.getChartInsertLock(k), chartLoggerService.logger, name, schema, true);
+		super(db, (k) => acquireChartInsertLock(redisClient, k), chartLoggerService.logger, name, schema, true);
 	}
 
 	protected async tickMajor(group: string): Promise<Partial<KVs<typeof schema>>> {

packages/backend/src/core/chart/charts/per-user-pv.ts

@@ -5,10 +5,11 @@
 
 import { Injectable, Inject } from '@nestjs/common';
 import { DataSource } from 'typeorm';
+import * as Redis from 'ioredis';
 import type { MiUser } from '@/models/User.js';
-import { AppLockService } from '@/core/AppLockService.js';
 import { DI } from '@/di-symbols.js';
 import { bindThis } from '@/decorators.js';
+import { acquireChartInsertLock } from '@/misc/distributed-lock.js';
 import Chart from '../core.js';
 import { ChartLoggerService } from '../ChartLoggerService.js';
 import { name, schema } from './entities/per-user-pv.js';
@@ -23,10 +24,12 @@ export default class PerUserPvChart extends Chart<typeof schema> { // eslint-dis
 		@Inject(DI.db)
 		private db: DataSource,
 
-		private appLockService: AppLockService,
+		@Inject(DI.redis)
+		private redisClient: Redis.Redis,
+
 		private chartLoggerService: ChartLoggerService,
 	) {
-		super(db, (k) => appLockService.getChartInsertLock(k), chartLoggerService.logger, name, schema, true);
+		super(db, (k) => acquireChartInsertLock(redisClient, k), chartLoggerService.logger, name, schema, true);
 	}
 
 	protected async tickMajor(): Promise<Partial<KVs<typeof schema>>> {

packages/backend/src/core/chart/charts/per-user-reactions.ts

@@ -5,12 +5,13 @@
 
 import { Injectable, Inject } from '@nestjs/common';
 import { DataSource } from 'typeorm';
+import * as Redis from 'ioredis';
 import type { MiUser } from '@/models/User.js';
 import type { MiNote } from '@/models/Note.js';
-import { AppLockService } from '@/core/AppLockService.js';
 import { DI } from '@/di-symbols.js';
 import { UserEntityService } from '@/core/entities/UserEntityService.js';
 import { bindThis } from '@/decorators.js';
+import { acquireChartInsertLock } from '@/misc/distributed-lock.js';
 import Chart from '../core.js';
 import { ChartLoggerService } from '../ChartLoggerService.js';
 import { name, schema } from './entities/per-user-reactions.js';
@@ -25,11 +26,13 @@ export default class PerUserReactionsChart extends Chart<typeof schema> { // esl
 		@Inject(DI.db)
 		private db: DataSource,
 
-		private appLockService: AppLockService,
+		@Inject(DI.redis)
+		private redisClient: Redis.Redis,
+
 		private userEntityService: UserEntityService,
 		private chartLoggerService: ChartLoggerService,
 	) {
-		super(db, (k) => appLockService.getChartInsertLock(k), chartLoggerService.logger, name, schema, true);
+		super(db, (k) => acquireChartInsertLock(redisClient, k), chartLoggerService.logger, name, schema, true);
 	}
 
 	protected async tickMajor(group: string): Promise<Partial<KVs<typeof schema>>> {

packages/backend/src/core/chart/charts/test-grouped.ts

@@ -5,10 +5,11 @@
 
 import { Injectable, Inject } from '@nestjs/common';
 import { DataSource } from 'typeorm';
-import { AppLockService } from '@/core/AppLockService.js';
+import * as Redis from 'ioredis';
 import { DI } from '@/di-symbols.js';
 import Logger from '@/logger.js';
 import { bindThis } from '@/decorators.js';
+import { acquireChartInsertLock } from '@/misc/distributed-lock.js';
 import Chart from '../core.js';
 import { name, schema } from './entities/test-grouped.js';
 import type { KVs } from '../core.js';
@@ -24,10 +25,12 @@ export default class TestGroupedChart extends Chart<typeof schema> { // eslint-d
 		@Inject(DI.db)
 		private db: DataSource,
 
-		private appLockService: AppLockService,
+		@Inject(DI.redis)
+		private redisClient: Redis.Redis,
+
 		logger: Logger,
 	) {
-		super(db, (k) => appLockService.getChartInsertLock(k), logger, name, schema, true);
+		super(db, (k) => acquireChartInsertLock(redisClient, k), logger, name, schema, true);
 	}
 
 	protected async tickMajor(group: string): Promise<Partial<KVs<typeof schema>>> {

packages/backend/src/core/chart/charts/test-intersection.ts

@@ -5,10 +5,11 @@
 
 import { Injectable, Inject } from '@nestjs/common';
 import { DataSource } from 'typeorm';
-import { AppLockService } from '@/core/AppLockService.js';
+import * as Redis from 'ioredis';
 import { DI } from '@/di-symbols.js';
 import Logger from '@/logger.js';
 import { bindThis } from '@/decorators.js';
+import { acquireChartInsertLock } from '@/misc/distributed-lock.js';
 import Chart from '../core.js';
 import { name, schema } from './entities/test-intersection.js';
 import type { KVs } from '../core.js';
@@ -22,10 +23,12 @@ export default class TestIntersectionChart extends Chart<typeof schema> { // esl
 		@Inject(DI.db)
 		private db: DataSource,
 
-		private appLockService: AppLockService,
+		@Inject(DI.redis)
+		private redisClient: Redis.Redis,
+
 		logger: Logger,
 	) {
-		super(db, (k) => appLockService.getChartInsertLock(k), logger, name, schema);
+		super(db, (k) => acquireChartInsertLock(redisClient, k), logger, name, schema);
 	}
 
 	protected async tickMajor(): Promise<Partial<KVs<typeof schema>>> {

packages/backend/src/core/chart/charts/test-unique.ts

@@ -5,10 +5,11 @@
 
 import { Injectable, Inject } from '@nestjs/common';
 import { DataSource } from 'typeorm';
-import { AppLockService } from '@/core/AppLockService.js';
+import * as Redis from 'ioredis';
 import { DI } from '@/di-symbols.js';
 import Logger from '@/logger.js';
 import { bindThis } from '@/decorators.js';
+import { acquireChartInsertLock } from '@/misc/distributed-lock.js';
 import Chart from '../core.js';
 import { name, schema } from './entities/test-unique.js';
 import type { KVs } from '../core.js';
@@ -22,10 +23,12 @@ export default class TestUniqueChart extends Chart<typeof schema> { // eslint-di
 		@Inject(DI.db)
 		private db: DataSource,
 
-		private appLockService: AppLockService,
+		@Inject(DI.redis)
+		private redisClient: Redis.Redis,
+
 		logger: Logger,
 	) {
-		super(db, (k) => appLockService.getChartInsertLock(k), logger, name, schema);
+		super(db, (k) => acquireChartInsertLock(redisClient, k), logger, name, schema);
 	}
 
 	protected async tickMajor(): Promise<Partial<KVs<typeof schema>>> {

packages/backend/src/core/chart/charts/test.ts

@@ -5,10 +5,11 @@
 
 import { Injectable, Inject } from '@nestjs/common';
 import { DataSource } from 'typeorm';
-import { AppLockService } from '@/core/AppLockService.js';
+import * as Redis from 'ioredis';
 import { DI } from '@/di-symbols.js';
 import Logger from '@/logger.js';
 import { bindThis } from '@/decorators.js';
+import { acquireChartInsertLock } from '@/misc/distributed-lock.js';
 import Chart from '../core.js';
 import { name, schema } from './entities/test.js';
 import type { KVs } from '../core.js';
@@ -24,10 +25,12 @@ export default class TestChart extends Chart<typeof schema> { // eslint-disable-
 		@Inject(DI.db)
 		private db: DataSource,
 
-		private appLockService: AppLockService,
+		@Inject(DI.redis)
+		private redisClient: Redis.Redis,
+
 		logger: Logger,
 	) {
-		super(db, (k) => appLockService.getChartInsertLock(k), logger, name, schema);
+		super(db, (k) => acquireChartInsertLock(redisClient, k), logger, name, schema);
 	}
 
 	protected async tickMajor(): Promise<Partial<KVs<typeof schema>>> {

packages/backend/src/core/chart/charts/users.ts

@@ -5,12 +5,13 @@
 
 import { Injectable, Inject } from '@nestjs/common';
 import { Not, IsNull, DataSource } from 'typeorm';
+import * as Redis from 'ioredis';
 import type { MiUser } from '@/models/User.js';
-import { AppLockService } from '@/core/AppLockService.js';
 import { DI } from '@/di-symbols.js';
 import { UserEntityService } from '@/core/entities/UserEntityService.js';
 import type { UsersRepository } from '@/models/_.js';
 import { bindThis } from '@/decorators.js';
+import { acquireChartInsertLock } from '@/misc/distributed-lock.js';
 import Chart from '../core.js';
 import { ChartLoggerService } from '../ChartLoggerService.js';
 import { name, schema } from './entities/users.js';
@@ -25,14 +26,16 @@ export default class UsersChart extends Chart<typeof schema> { // eslint-disable
 		@Inject(DI.db)
 		private db: DataSource,
 
+		@Inject(DI.redis)
+		private redisClient: Redis.Redis,
+
 		@Inject(DI.usersRepository)
 		private usersRepository: UsersRepository,
 
-		private appLockService: AppLockService,
 		private userEntityService: UserEntityService,
 		private chartLoggerService: ChartLoggerService,
 	) {
-		super(db, (k) => appLockService.getChartInsertLock(k), chartLoggerService.logger, name, schema);
+		super(db, (k) => acquireChartInsertLock(redisClient, k), chartLoggerService.logger, name, schema);
 	}
 
 	protected async tickMajor(): Promise<Partial<KVs<typeof schema>>> {

packages/backend/src/misc/distributed-lock.ts

@@ -0,0 +1,49 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and misskey-project
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import * as Redis from 'ioredis';
+
+export async function acquireDistributedLock(
+	redis: Redis.Redis,
+	name: string,
+	timeout: number,
+	maxRetries: number,
+	retryInterval: number,
+): Promise<() => Promise<void>> {
+	const lockKey = `lock:${name}`;
+	const identifier = Math.random().toString(36).slice(2);
+
+	let retries = 0;
+	while (retries < maxRetries) {
+		const result = await redis.set(lockKey, identifier, 'PX', timeout, 'NX');
+		if (result === 'OK') {
+			return async () => {
+				const currentIdentifier = await redis.get(lockKey);
+				if (currentIdentifier === identifier) {
+					await redis.del(lockKey);
+				}
+			};
+		}
+
+		await new Promise(resolve => setTimeout(resolve, retryInterval));
+		retries++;
+	}
+
+	throw new Error(`Failed to acquire lock ${name}`);
+}
+
+export function acquireApObjectLock(
+	redis: Redis.Redis,
+	uri: string,
+): Promise<() => Promise<void>> {
+	return acquireDistributedLock(redis, `ap-object:${uri}`, 30 * 1000, 50, 100);
+}
+
+export function acquireChartInsertLock(
+	redis: Redis.Redis,
+	name: string,
+): Promise<() => Promise<void>> {
+	return acquireDistributedLock(redis, `chart-insert:${name}`, 30 * 1000, 50, 500);
+}

packages/backend/src/misc/escape-html.ts

@@ -0,0 +1,13 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and misskey-project
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+export function escapeHtml(text: string): string {
+	return text
+		.replace(/&/g, '&')
+		.replace(/</g, '&lt;')
+		.replace(/>/g, '&gt;')
+		.replace(/"/g, '&quot;')
+		.replace(/'/g, '&#039;');
+}

packages/backend/src/misc/json-stringify-html-safe.ts

@@ -0,0 +1,18 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and misskey-project
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+const ESCAPE_LOOKUP = {
+	'&': '\\u0026',
+	'>': '\\u003e',
+	'<': '\\u003c',
+	'\u2028': '\\u2028',
+	'\u2029': '\\u2029',
+} as Record<string, string>;
+
+const ESCAPE_REGEX = /[&><\u2028\u2029]/g;
+
+export function htmlSafeJsonStringify(obj: any): string {
+	return JSON.stringify(obj).replace(ESCAPE_REGEX, x => ESCAPE_LOOKUP[x]);
+}

packages/backend/src/queue/QueueProcessorService.ts

@@ -5,7 +5,6 @@
 
 import { Inject, Injectable, OnApplicationShutdown } from '@nestjs/common';
 import * as Bull from 'bullmq';
-import * as Sentry from '@sentry/node';
 import type { Config } from '@/config.js';
 import { DI } from '@/di-symbols.js';
 import type Logger from '@/logger.js';
@@ -157,6 +156,13 @@ export class QueueProcessorService implements OnApplicationShutdown {
 			};
 		}
 
+		let Sentry: typeof import('@sentry/node') | undefined;
+		if (Sentry != null) {
+			import('@sentry/node').then((mod) => {
+				Sentry = mod;
+			});
+		}
+
 		//#region system
 		{
 			const processer = (job: Bull.Job) => {
@@ -175,7 +181,7 @@ export class QueueProcessorService implements OnApplicationShutdown {
 			};
 
 			this.systemQueueWorker = new Bull.Worker(QUEUE.SYSTEM, (job) => {
-				if (this.config.sentryForBackend) {
+				if (Sentry != null) {
 					return Sentry.startSpan({ name: 'Queue: System: ' + job.name }, () => processer(job));
 				} else {
 					return processer(job);
@@ -192,7 +198,7 @@ export class QueueProcessorService implements OnApplicationShutdown {
 				.on('completed', (job, result) => logger.debug(`completed(${result}) id=${job.id}`))
 				.on('failed', (job, err: Error) => {
 					logger.error(`failed(${err.name}: ${err.message}) id=${job?.id ?? '?'}`, { job: renderJob(job), e: renderError(err) });
-					if (config.sentryForBackend) {
+					if (Sentry != null) {
 						Sentry.captureMessage(`Queue: System: ${job?.name ?? '?'}: ${err.name}: ${err.message}`, {
 							level: 'error',
 							extra: { job, err },
@@ -232,7 +238,7 @@ export class QueueProcessorService implements OnApplicationShutdown {
 			};
 
 			this.dbQueueWorker = new Bull.Worker(QUEUE.DB, (job) => {
-				if (this.config.sentryForBackend) {
+				if (Sentry != null) {
 					return Sentry.startSpan({ name: 'Queue: DB: ' + job.name }, () => processer(job));
 				} else {
 					return processer(job);
@@ -249,7 +255,7 @@ export class QueueProcessorService implements OnApplicationShutdown {
 				.on('completed', (job, result) => logger.debug(`completed(${result}) id=${job.id}`))
 				.on('failed', (job, err) => {
 					logger.error(`failed(${err.name}: ${err.message}) id=${job?.id ?? '?'}`, { job: renderJob(job), e: renderError(err) });
-					if (config.sentryForBackend) {
+					if (Sentry != null) {
 						Sentry.captureMessage(`Queue: DB: ${job?.name ?? '?'}: ${err.name}: ${err.message}`, {
 							level: 'error',
 							extra: { job, err },
@@ -264,7 +270,7 @@ export class QueueProcessorService implements OnApplicationShutdown {
 		//#region deliver
 		{
 			this.deliverQueueWorker = new Bull.Worker(QUEUE.DELIVER, (job) => {
-				if (this.config.sentryForBackend) {
+				if (Sentry != null) {
 					return Sentry.startSpan({ name: 'Queue: Deliver' }, () => this.deliverProcessorService.process(job));
 				} else {
 					return this.deliverProcessorService.process(job);
@@ -289,7 +295,7 @@ export class QueueProcessorService implements OnApplicationShutdown {
 				.on('completed', (job, result) => logger.debug(`completed(${result}) ${getJobInfo(job, true)} to=${job.data.to}`))
 				.on('failed', (job, err) => {
 					logger.error(`failed(${err.name}: ${err.message}) ${getJobInfo(job)} to=${job ? job.data.to : '-'}`);
-					if (config.sentryForBackend) {
+					if (Sentry != null) {
 						Sentry.captureMessage(`Queue: Deliver: ${err.name}: ${err.message}`, {
 							level: 'error',
 							extra: { job, err },
@@ -304,7 +310,7 @@ export class QueueProcessorService implements OnApplicationShutdown {
 		//#region inbox
 		{
 			this.inboxQueueWorker = new Bull.Worker(QUEUE.INBOX, (job) => {
-				if (this.config.sentryForBackend) {
+				if (Sentry != null) {
 					return Sentry.startSpan({ name: 'Queue: Inbox' }, () => this.inboxProcessorService.process(job));
 				} else {
 					return this.inboxProcessorService.process(job);
@@ -329,7 +335,7 @@ export class QueueProcessorService implements OnApplicationShutdown {
 				.on('completed', (job, result) => logger.debug(`completed(${result}) ${getJobInfo(job, true)}`))
 				.on('failed', (job, err) => {
 					logger.error(`failed(${err.name}: ${err.message}) ${getJobInfo(job)} activity=${job ? (job.data.activity ? job.data.activity.id : 'none') : '-'}`, { job: renderJob(job), e: renderError(err) });
-					if (config.sentryForBackend) {
+					if (Sentry != null) {
 						Sentry.captureMessage(`Queue: Inbox: ${err.name}: ${err.message}`, {
 							level: 'error',
 							extra: { job, err },
@@ -344,7 +350,7 @@ export class QueueProcessorService implements OnApplicationShutdown {
 		//#region user-webhook deliver
 		{
 			this.userWebhookDeliverQueueWorker = new Bull.Worker(QUEUE.USER_WEBHOOK_DELIVER, (job) => {
-				if (this.config.sentryForBackend) {
+				if (Sentry != null) {
 					return Sentry.startSpan({ name: 'Queue: UserWebhookDeliver' }, () => this.userWebhookDeliverProcessorService.process(job));
 				} else {
 					return this.userWebhookDeliverProcessorService.process(job);
@@ -369,7 +375,7 @@ export class QueueProcessorService implements OnApplicationShutdown {
 				.on('completed', (job, result) => logger.debug(`completed(${result}) ${getJobInfo(job, true)} to=${job.data.to}`))
 				.on('failed', (job, err) => {
 					logger.error(`failed(${err.name}: ${err.message}) ${getJobInfo(job)} to=${job ? job.data.to : '-'}`);
-					if (config.sentryForBackend) {
+					if (Sentry != null) {
 						Sentry.captureMessage(`Queue: UserWebhookDeliver: ${err.name}: ${err.message}`, {
 							level: 'error',
 							extra: { job, err },
@@ -384,7 +390,7 @@ export class QueueProcessorService implements OnApplicationShutdown {
 		//#region system-webhook deliver
 		{
 			this.systemWebhookDeliverQueueWorker = new Bull.Worker(QUEUE.SYSTEM_WEBHOOK_DELIVER, (job) => {
-				if (this.config.sentryForBackend) {
+				if (Sentry != null) {
 					return Sentry.startSpan({ name: 'Queue: SystemWebhookDeliver' }, () => this.systemWebhookDeliverProcessorService.process(job));
 				} else {
 					return this.systemWebhookDeliverProcessorService.process(job);
@@ -409,7 +415,7 @@ export class QueueProcessorService implements OnApplicationShutdown {
 				.on('completed', (job, result) => logger.debug(`completed(${result}) ${getJobInfo(job, true)} to=${job.data.to}`))
 				.on('failed', (job, err) => {
 					logger.error(`failed(${err.name}: ${err.message}) ${getJobInfo(job)} to=${job ? job.data.to : '-'}`);
-					if (config.sentryForBackend) {
+					if (Sentry != null) {
 						Sentry.captureMessage(`Queue: SystemWebhookDeliver: ${err.name}: ${err.message}`, {
 							level: 'error',
 							extra: { job, err },
@@ -434,7 +440,7 @@ export class QueueProcessorService implements OnApplicationShutdown {
 			};
 
 			this.relationshipQueueWorker = new Bull.Worker(QUEUE.RELATIONSHIP, (job) => {
-				if (this.config.sentryForBackend) {
+				if (Sentry != null) {
 					return Sentry.startSpan({ name: 'Queue: Relationship: ' + job.name }, () => processer(job));
 				} else {
 					return processer(job);
@@ -456,7 +462,7 @@ export class QueueProcessorService implements OnApplicationShutdown {
 				.on('completed', (job, result) => logger.debug(`completed(${result}) id=${job.id}`))
 				.on('failed', (job, err) => {
 					logger.error(`failed(${err.name}: ${err.message}) id=${job?.id ?? '?'}`, { job: renderJob(job), e: renderError(err) });
-					if (config.sentryForBackend) {
+					if (Sentry != null) {
 						Sentry.captureMessage(`Queue: Relationship: ${job?.name ?? '?'}: ${err.name}: ${err.message}`, {
 							level: 'error',
 							extra: { job, err },
@@ -479,7 +485,7 @@ export class QueueProcessorService implements OnApplicationShutdown {
 			};
 
 			this.objectStorageQueueWorker = new Bull.Worker(QUEUE.OBJECT_STORAGE, (job) => {
-				if (this.config.sentryForBackend) {
+				if (Sentry != null) {
 					return Sentry.startSpan({ name: 'Queue: ObjectStorage: ' + job.name }, () => processer(job));
 				} else {
 					return processer(job);
@@ -497,7 +503,7 @@ export class QueueProcessorService implements OnApplicationShutdown {
 				.on('completed', (job, result) => logger.debug(`completed(${result}) id=${job.id}`))
 				.on('failed', (job, err) => {
 					logger.error(`failed(${err.name}: ${err.message}) id=${job?.id ?? '?'}`, { job: renderJob(job), e: renderError(err) });
-					if (config.sentryForBackend) {
+					if (Sentry != null) {
 						Sentry.captureMessage(`Queue: ObjectStorage: ${job?.name ?? '?'}: ${err.name}: ${err.message}`, {
 							level: 'error',
 							extra: { job, err },
@@ -512,7 +518,7 @@ export class QueueProcessorService implements OnApplicationShutdown {
 		//#region ended poll notification
 		{
 			this.endedPollNotificationQueueWorker = new Bull.Worker(QUEUE.ENDED_POLL_NOTIFICATION, (job) => {
-				if (this.config.sentryForBackend) {
+				if (Sentry != null) {
 					return Sentry.startSpan({ name: 'Queue: EndedPollNotification' }, () => this.endedPollNotificationProcessorService.process(job));
 				} else {
 					return this.endedPollNotificationProcessorService.process(job);
@@ -527,7 +533,7 @@ export class QueueProcessorService implements OnApplicationShutdown {
 		//#region post scheduled note
 		{
 			this.postScheduledNoteQueueWorker = new Bull.Worker(QUEUE.POST_SCHEDULED_NOTE, async (job) => {
-				if (this.config.sentryForBackend) {
+				if (Sentry != null) {
 					return Sentry.startSpan({ name: 'Queue: PostScheduledNote' }, () => this.postScheduledNoteProcessorService.process(job));
 				} else {
 					return this.postScheduledNoteProcessorService.process(job);

packages/backend/src/server/ServerModule.ts

@@ -25,6 +25,7 @@ import { SignupApiService } from './api/SignupApiService.js';
 import { StreamingApiServerService } from './api/StreamingApiServerService.js';
 import { OpenApiServerService } from './api/openapi/OpenApiServerService.js';
 import { ClientServerService } from './web/ClientServerService.js';
+import { HtmlTemplateService } from './web/HtmlTemplateService.js';
 import { FeedService } from './web/FeedService.js';
 import { UrlPreviewService } from './web/UrlPreviewService.js';
 import { ClientLoggerService } from './web/ClientLoggerService.js';
@@ -58,6 +59,7 @@ import { SigninWithPasskeyApiService } from './api/SigninWithPasskeyApiService.j
 	providers: [
 		ClientServerService,
 		ClientLoggerService,
+		HtmlTemplateService,
 		FeedService,
 		HealthServerService,
 		UrlPreviewService,

packages/backend/src/server/api/ApiCallService.ts

@@ -7,7 +7,6 @@ import { randomUUID } from 'node:crypto';
 import * as fs from 'node:fs';
 import * as stream from 'node:stream/promises';
 import { Inject, Injectable } from '@nestjs/common';
-import * as Sentry from '@sentry/node';
 import { DI } from '@/di-symbols.js';
 import { getIpHash } from '@/misc/get-ip-hash.js';
 import type { MiLocalUser, MiUser } from '@/models/User.js';
@@ -37,6 +36,7 @@ export class ApiCallService implements OnApplicationShutdown {
 	private logger: Logger;
 	private userIpHistories: Map<MiUser['id'], Set<string>>;
 	private userIpHistoriesClearIntervalId: NodeJS.Timeout;
+	private Sentry: typeof import('@sentry/node') | null = null;
 
 	constructor(
 		@Inject(DI.meta)
@@ -59,6 +59,12 @@ export class ApiCallService implements OnApplicationShutdown {
 		this.userIpHistoriesClearIntervalId = setInterval(() => {
 			this.userIpHistories.clear();
 		}, 1000 * 60 * 60);
+
+		if (this.config.sentryForBackend) {
+			import('@sentry/node').then((Sentry) => {
+				this.Sentry = Sentry;
+			});
+		}
 	}
 
 	#sendApiError(reply: FastifyReply, err: ApiError): void {
@@ -120,8 +126,8 @@ export class ApiCallService implements OnApplicationShutdown {
 				},
 			});
 
-			if (this.config.sentryForBackend) {
-				Sentry.captureMessage(`Internal error occurred in ${ep.name}: ${err.message}`, {
+			if (this.Sentry != null) {
+				this.Sentry.captureMessage(`Internal error occurred in ${ep.name}: ${err.message}`, {
 					level: 'error',
 					user: {
 						id: userId,
@@ -432,8 +438,8 @@ export class ApiCallService implements OnApplicationShutdown {
 		}
 
 		// API invoking
-		if (this.config.sentryForBackend) {
-			return await Sentry.startSpan({
+		if (this.Sentry != null) {
+			return await this.Sentry.startSpan({
 				name: 'API: ' + ep.name,
 			}, () => ep.exec(data, user, token, file, request.ip, request.headers)
 				.catch((err: Error) => this.#onExecError(ep, data, err, user?.id)));

packages/backend/src/server/api/endpoints/i/update.ts

@@ -7,7 +7,7 @@ import RE2 from 're2';
 import * as mfm from 'mfm-js';
 import { Inject, Injectable } from '@nestjs/common';
 import ms from 'ms';
-import { JSDOM } from 'jsdom';
+import * as htmlParser from 'node-html-parser';
 import { extractCustomEmojisFromMfm } from '@/misc/extract-custom-emojis-from-mfm.js';
 import { extractHashtags } from '@/misc/extract-hashtags.js';
 import * as Acct from '@/misc/acct.js';
@@ -569,16 +569,15 @@ export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-
 		try {
 			const html = await this.httpRequestService.getHtml(url);
 
-			const { window } = new JSDOM(html);
-			const doc: Document = window.document;
+			const doc = htmlParser.parse(html);
 
 			const myLink = `${this.config.url}/@${user.username}`;
 
 			const aEls = Array.from(doc.getElementsByTagName('a'));
 			const linkEls = Array.from(doc.getElementsByTagName('link'));
 
-			const includesMyLink = aEls.some(a => a.href === myLink);
-			const includesRelMeLinks = [...aEls, ...linkEls].some(link => link.rel === 'me' && link.href === myLink);
+			const includesMyLink = aEls.some(a => a.attributes.href === myLink);
+			const includesRelMeLinks = [...aEls, ...linkEls].some(link => link.attributes.rel?.split(/\s+/).includes('me') && link.attributes.href === myLink);
 
 			if (includesMyLink || includesRelMeLinks) {
 				await this.userProfilesRepository.createQueryBuilder('profile').update()
@@ -588,8 +587,6 @@ export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-
 					})
 					.execute();
 			}
-
-			window.close();
 		} catch (err) {
 			// なにもしない
 		}

packages/backend/src/server/api/endpoints/notes/drafts/create.ts

@@ -135,6 +135,18 @@ export const meta = {
 			code: 'CANNOT_RENOTE_TO_EXTERNAL',
 			id: 'ed1952ac-2d26-4957-8b30-2deda76bedf7',
 		},
+
+		scheduledAtRequired: {
+			message: 'scheduledAt is required when isActuallyScheduled is true.',
+			code: 'SCHEDULED_AT_REQUIRED',
+			id: '15e28a55-e74c-4d65-89b7-8880cdaaa87d',
+		},
+
+		scheduledAtMustBeInFuture: {
+			message: 'scheduledAt must be in the future.',
+			code: 'SCHEDULED_AT_MUST_BE_IN_FUTURE',
+			id: 'e4bed6c9-017e-4934-aed0-01c22cc60ec1',
+		},
 	},
 
 	limit: {
@@ -252,6 +264,10 @@ export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-
 							throw new ApiError(meta.errors.cannotReplyToSpecifiedVisibilityNoteWithExtendedVisibility);
 						case 'c3275f19-4558-4c59-83e1-4f684b5fab66':
 							throw new ApiError(meta.errors.tooManyScheduledNotes);
+						case '94a89a43-3591-400a-9c17-dd166e71fdfa':
+							throw new ApiError(meta.errors.scheduledAtRequired);
+						case 'b34d0c1b-996f-4e34-a428-c636d98df457':
+							throw new ApiError(meta.errors.scheduledAtMustBeInFuture);
 						default:
 							throw err;
 					}

packages/backend/src/server/api/endpoints/notes/drafts/update.ts

@@ -165,6 +165,18 @@ export const meta = {
 			code: 'TOO_MANY_SCHEDULED_NOTES',
 			id: '02f5df79-08ae-4a33-8524-f1503c8f6212',
 		},
+
+		scheduledAtRequired: {
+			message: 'scheduledAt is required when isActuallyScheduled is true.',
+			code: 'SCHEDULED_AT_REQUIRED',
+			id: 'fe9737d5-cc41-498c-af9d-149207307530',
+		},
+
+		scheduledAtMustBeInFuture: {
+			message: 'scheduledAt must be in the future.',
+			code: 'SCHEDULED_AT_MUST_BE_IN_FUTURE',
+			id: 'ed1a6673-d0d1-4364-aaae-9bf3f139cbc5',
+		},
 	},
 
 	limit: {
@@ -295,6 +307,10 @@ export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-
 							throw new ApiError(meta.errors.containsTooManyMentions);
 						case 'bacdf856-5c51-4159-b88a-804fa5103be5':
 							throw new ApiError(meta.errors.tooManyScheduledNotes);
+						case '94a89a43-3591-400a-9c17-dd166e71fdfa':
+							throw new ApiError(meta.errors.scheduledAtRequired);
+						case 'b34d0c1b-996f-4e34-a428-c636d98df457':
+							throw new ApiError(meta.errors.scheduledAtMustBeInFuture);
 						default:
 							throw err;
 					}

packages/backend/src/server/oauth/OAuth2ProviderService.ts

@@ -6,18 +6,15 @@
 import dns from 'node:dns/promises';
 import { fileURLToPath } from 'node:url';
 import { Inject, Injectable } from '@nestjs/common';
-import { JSDOM } from 'jsdom';
+import * as htmlParser from 'node-html-parser';
 import httpLinkHeader from 'http-link-header';
 import ipaddr from 'ipaddr.js';
 import oauth2orize, { type OAuth2, AuthorizationError, ValidateFunctionArity2, OAuth2Req, MiddlewareRequest } from 'oauth2orize';
 import oauth2Pkce from 'oauth2orize-pkce';
 import fastifyCors from '@fastify/cors';
-import fastifyView from '@fastify/view';
-import pug from 'pug';
 import bodyParser from 'body-parser';
 import fastifyExpress from '@fastify/express';
 import { verifyChallenge } from 'pkce-challenge';
-import { mf2 } from 'microformats-parser';
 import { permissions as kinds } from 'misskey-js';
 import { secureRndstr } from '@/misc/secure-rndstr.js';
 import { HttpRequestService } from '@/core/HttpRequestService.js';
@@ -32,6 +29,8 @@ import { MemoryKVCache } from '@/misc/cache.js';
 import { LoggerService } from '@/core/LoggerService.js';
 import Logger from '@/logger.js';
 import { StatusError } from '@/misc/status-error.js';
+import { HtmlTemplateService } from '@/server/web/HtmlTemplateService.js';
+import { OAuthPage } from '@/server/web/views/oauth.js';
 import type { ServerResponse } from 'node:http';
 import type { FastifyInstance } from 'fastify';
 
@@ -98,6 +97,32 @@ interface ClientInformation {
 	logo: string | null;
 }
 
+function parseMicroformats(doc: htmlParser.HTMLElement, baseUrl: string, id: string): { name: string | null; logo: string | null; } {
+	let name: string | null = null;
+	let logo: string | null = null;
+
+	const hApp = doc.querySelector('.h-app');
+	if (hApp == null) return { name, logo };
+
+	const nameEl = hApp.querySelector('.p-name');
+	if (nameEl != null) {
+		const href = nameEl.attributes.href || nameEl.attributes.src;
+		if (href != null && new URL(href, baseUrl).toString() === new URL(id).toString()) {
+			name = nameEl.textContent.trim();
+		}
+	}
+
+	const logoEl = hApp.querySelector('.u-logo');
+	if (logoEl != null) {
+		const href = logoEl.attributes.href || logoEl.attributes.src;
+		if (href != null) {
+			logo = new URL(href, baseUrl).toString();
+		}
+	}
+
+	return { name, logo };
+}
+
 // https://indieauth.spec.indieweb.org/#client-information-discovery
 // "Authorization servers SHOULD support parsing the [h-app] Microformat from the client_id,
 // and if there is an [h-app] with a url property matching the client_id URL,
@@ -120,24 +145,19 @@ async function discoverClientInformation(logger: Logger, httpRequestService: Htt
 		}
 
 		const text = await res.text();
-		const fragment = JSDOM.fragment(text);
+		const doc = htmlParser.parse(`<div>${text}</div>`);
 
-		redirectUris.push(...[...fragment.querySelectorAll<HTMLLinkElement>('link[rel=redirect_uri][href]')].map(el => el.href));
+		redirectUris.push(...[...doc.querySelectorAll('link[rel=redirect_uri][href]')].map(el => el.attributes.href));
 
 		let name = id;
 		let logo: string | null = null;
 		if (text) {
-			const microformats = mf2(text, { baseUrl: res.url });
-			const correspondingProperties = microformats.items.find(item => item.type?.includes('h-app') && item.properties.url.includes(id));
-			if (correspondingProperties) {
-				const nameProperty = correspondingProperties.properties.name?.[0];
-				if (typeof nameProperty === 'string') {
-					name = nameProperty;
-				}
-				const logoProperty = correspondingProperties.properties.logo?.[0];
-				if (typeof logoProperty === 'string') {
-					logo = logoProperty;
-				}
+			const microformats = parseMicroformats(doc, res.url, id);
+			if (typeof microformats.name === 'string') {
+				name = microformats.name;
+			}
+			if (typeof microformats.logo === 'string') {
+				logo = microformats.logo;
 			}
 		}
 
@@ -253,6 +273,7 @@ export class OAuth2ProviderService {
 		private usersRepository: UsersRepository,
 		private cacheService: CacheService,
 		loggerService: LoggerService,
+		private htmlTemplateService: HtmlTemplateService,
 	) {
 		this.#logger = loggerService.getLogger('oauth');
 
@@ -386,24 +407,16 @@ export class OAuth2ProviderService {
 			this.#logger.info(`Rendering authorization page for "${oauth2.client.name}"`);
 
 			reply.header('Cache-Control', 'no-store');
-			return await reply.view('oauth', {
+			return await HtmlTemplateService.replyHtml(reply, OAuthPage({
+				...await this.htmlTemplateService.getCommonData(),
 				transactionId: oauth2.transactionID,
 				clientName: oauth2.client.name,
-				clientLogo: oauth2.client.logo,
-				scope: oauth2.req.scope.join(' '),
-			});
+				clientLogo: oauth2.client.logo ?? undefined,
+				scope: oauth2.req.scope,
+			}));
 		});
 		fastify.post('/decision', async () => { });
 
-		fastify.register(fastifyView, {
-			root: fileURLToPath(new URL('../web/views', import.meta.url)),
-			engine: { pug },
-			defaultContext: {
-				version: this.config.version,
-				config: this.config,
-			},
-		});
-
 		await fastify.register(fastifyExpress);
 		fastify.use('/authorize', this.#server.authorize(((areq, done) => {
 			(async (): Promise<Parameters<typeof done>> => {

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

@@ -9,21 +9,16 @@ import { fileURLToPath } from 'node:url';
 import { Inject, Injectable } from '@nestjs/common';
 import ms from 'ms';
 import sharp from 'sharp';
-import pug from 'pug';
 import { In, IsNull } from 'typeorm';
 import fastifyStatic from '@fastify/static';
-import fastifyView from '@fastify/view';
 import fastifyProxy from '@fastify/http-proxy';
 import vary from 'vary';
-import htmlSafeJsonStringify from 'htmlescape';
 import type { Config } from '@/config.js';
-import { getNoteSummary } from '@/misc/get-note-summary.js';
 import { DI } from '@/di-symbols.js';
 import * as Acct from '@/misc/acct.js';
 import { UserEntityService } from '@/core/entities/UserEntityService.js';
 import { NoteEntityService } from '@/core/entities/NoteEntityService.js';
 import { PageEntityService } from '@/core/entities/PageEntityService.js';
-import { MetaEntityService } from '@/core/entities/MetaEntityService.js';
 import { GalleryPostEntityService } from '@/core/entities/GalleryPostEntityService.js';
 import { ClipEntityService } from '@/core/entities/ClipEntityService.js';
 import { ChannelEntityService } from '@/core/entities/ChannelEntityService.js';
@@ -42,14 +37,33 @@ import type {
 } from '@/models/_.js';
 import type Logger from '@/logger.js';
 import { handleRequestRedirectToOmitSearch } from '@/misc/fastify-hook-handlers.js';
+import { htmlSafeJsonStringify } from '@/misc/json-stringify-html-safe.js';
 import { bindThis } from '@/decorators.js';
 import { FlashEntityService } from '@/core/entities/FlashEntityService.js';
-import { RoleService } from '@/core/RoleService.js';
 import { ReversiGameEntityService } from '@/core/entities/ReversiGameEntityService.js';
 import { AnnouncementEntityService } from '@/core/entities/AnnouncementEntityService.js';
 import { FeedService } from './FeedService.js';
 import { UrlPreviewService } from './UrlPreviewService.js';
 import { ClientLoggerService } from './ClientLoggerService.js';
+import { HtmlTemplateService } from './HtmlTemplateService.js';
+
+import { BasePage } from './views/base.js';
+import { UserPage } from './views/user.js';
+import { NotePage } from './views/note.js';
+import { PagePage } from './views/page.js';
+import { ClipPage } from './views/clip.js';
+import { FlashPage } from './views/flash.js';
+import { GalleryPostPage } from './views/gallery-post.js';
+import { ChannelPage } from './views/channel.js';
+import { ReversiGamePage } from './views/reversi-game.js';
+import { AnnouncementPage } from './views/announcement.js';
+import { BaseEmbed } from './views/base-embed.js';
+import { InfoCardPage } from './views/info-card.js';
+import { BiosPage } from './views/bios.js';
+import { CliPage } from './views/cli.js';
+import { FlushPage } from './views/flush.js';
+import { ErrorPage } from './views/error.js';
+
 import type { FastifyError, FastifyInstance, FastifyPluginOptions, FastifyReply } from 'fastify';
 
 const _filename = fileURLToPath(import.meta.url);
@@ -108,7 +122,6 @@ export class ClientServerService {
 		private userEntityService: UserEntityService,
 		private noteEntityService: NoteEntityService,
 		private pageEntityService: PageEntityService,
-		private metaEntityService: MetaEntityService,
 		private galleryPostEntityService: GalleryPostEntityService,
 		private clipEntityService: ClipEntityService,
 		private channelEntityService: ChannelEntityService,
@@ -116,7 +129,7 @@ export class ClientServerService {
 		private announcementEntityService: AnnouncementEntityService,
 		private urlPreviewService: UrlPreviewService,
 		private feedService: FeedService,
-		private roleService: RoleService,
+		private htmlTemplateService: HtmlTemplateService,
 		private clientLoggerService: ClientLoggerService,
 	) {
 		//this.createServer = this.createServer.bind(this);
@@ -182,38 +195,10 @@ export class ClientServerService {
 		return (manifest);
 	}
 
-	@bindThis
-	private async generateCommonPugData(meta: MiMeta) {
-		return {
-			instanceName: meta.name ?? 'Misskey',
-			icon: meta.iconUrl,
-			appleTouchIcon: meta.app512IconUrl,
-			themeColor: meta.themeColor,
-			serverErrorImageUrl: meta.serverErrorImageUrl ?? 'https://xn--931a.moe/assets/error.jpg',
-			infoImageUrl: meta.infoImageUrl ?? 'https://xn--931a.moe/assets/info.jpg',
-			notFoundImageUrl: meta.notFoundImageUrl ?? 'https://xn--931a.moe/assets/not-found.jpg',
-			instanceUrl: this.config.url,
-			metaJson: htmlSafeJsonStringify(await this.metaEntityService.packDetailed(meta)),
-			now: Date.now(),
-			federationEnabled: this.meta.federation !== 'none',
-		};
-	}
-
 	@bindThis
 	public createServer(fastify: FastifyInstance, options: FastifyPluginOptions, done: (err?: Error) => void) {
 		const configUrl = new URL(this.config.url);
 
-		fastify.register(fastifyView, {
-			root: _dirname + '/views',
-			engine: {
-				pug: pug,
-			},
-			defaultContext: {
-				version: this.config.version,
-				config: this.config,
-			},
-		});
-
 		fastify.addHook('onRequest', (request, reply, done) => {
 			// クリックジャッキング防止のためiFrameの中に入れられないようにする
 			reply.header('X-Frame-Options', 'DENY');
@@ -414,16 +399,15 @@ export class ClientServerService {
 
 		//#endregion
 
-		const renderBase = async (reply: FastifyReply, data: { [key: string]: any } = {}) => {
+		const renderBase = async (reply: FastifyReply, data: Partial<Parameters<typeof BasePage>[0]> = {}) => {
 			reply.header('Cache-Control', 'public, max-age=30');
-			return await reply.view('base', {
-				img: this.meta.bannerUrl,
-				url: this.config.url,
+			return await HtmlTemplateService.replyHtml(reply, BasePage({
+				img: this.meta.bannerUrl ?? undefined,
 				title: this.meta.name ?? 'Misskey',
-				desc: this.meta.description,
-				...await this.generateCommonPugData(this.meta),
+				desc: this.meta.description ?? undefined,
+				...await this.htmlTemplateService.getCommonData(),
 				...data,
-			});
+			}));
 		};
 
 		// URL preview endpoint
@@ -505,11 +489,6 @@ export class ClientServerService {
 				)
 			) {
 				const profile = await this.userProfilesRepository.findOneByOrFail({ userId: user.id });
-				const me = profile.fields
-					? profile.fields
-						.filter(filed => filed.value != null && filed.value.match(/^https?:/))
-						.map(field => field.value)
-					: [];
 
 				reply.header('Cache-Control', 'public, max-age=15');
 				if (profile.preventAiLearning) {
@@ -522,15 +501,15 @@ export class ClientServerService {
 					userProfile: profile,
 				});
 
-				return await reply.view('user', {
-					user, profile, me,
-					avatarUrl: _user.avatarUrl,
+				return await HtmlTemplateService.replyHtml(reply, UserPage({
+					user: _user,
+					profile,
 					sub: request.params.sub,
-					...await this.generateCommonPugData(this.meta),
-					clientCtx: htmlSafeJsonStringify({
+					...await this.htmlTemplateService.getCommonData(),
+					clientCtxJson: htmlSafeJsonStringify({
 						user: _user,
 					}),
-				});
+				}));
 			} else {
 				// リモートユーザーなので
 				// モデレータがAPI経由で参照可能にするために404にはしない
@@ -581,17 +560,14 @@ export class ClientServerService {
 					reply.header('X-Robots-Tag', 'noimageai');
 					reply.header('X-Robots-Tag', 'noai');
 				}
-				return await reply.view('note', {
+				return await HtmlTemplateService.replyHtml(reply, NotePage({
 					note: _note,
 					profile,
-					avatarUrl: _note.user.avatarUrl,
-					// TODO: Let locale changeable by instance setting
-					summary: getNoteSummary(_note),
-					...await this.generateCommonPugData(this.meta),
-					clientCtx: htmlSafeJsonStringify({
+					...await this.htmlTemplateService.getCommonData(),
+					clientCtxJson: htmlSafeJsonStringify({
 						note: _note,
 					}),
-				});
+				}));
 			} else {
 				return await renderBase(reply);
 			}
@@ -624,12 +600,11 @@ export class ClientServerService {
 					reply.header('X-Robots-Tag', 'noimageai');
 					reply.header('X-Robots-Tag', 'noai');
 				}
-				return await reply.view('page', {
+				return await HtmlTemplateService.replyHtml(reply, PagePage({
 					page: _page,
 					profile,
-					avatarUrl: _page.user.avatarUrl,
-					...await this.generateCommonPugData(this.meta),
-				});
+					...await this.htmlTemplateService.getCommonData(),
+				}));
 			} else {
 				return await renderBase(reply);
 			}
@@ -649,12 +624,11 @@ export class ClientServerService {
 					reply.header('X-Robots-Tag', 'noimageai');
 					reply.header('X-Robots-Tag', 'noai');
 				}
-				return await reply.view('flash', {
+				return await HtmlTemplateService.replyHtml(reply, FlashPage({
 					flash: _flash,
 					profile,
-					avatarUrl: _flash.user.avatarUrl,
-					...await this.generateCommonPugData(this.meta),
-				});
+					...await this.htmlTemplateService.getCommonData(),
+				}));
 			} else {
 				return await renderBase(reply);
 			}
@@ -674,15 +648,14 @@ export class ClientServerService {
 					reply.header('X-Robots-Tag', 'noimageai');
 					reply.header('X-Robots-Tag', 'noai');
 				}
-				return await reply.view('clip', {
+				return await HtmlTemplateService.replyHtml(reply, ClipPage({
 					clip: _clip,
 					profile,
-					avatarUrl: _clip.user.avatarUrl,
-					...await this.generateCommonPugData(this.meta),
-					clientCtx: htmlSafeJsonStringify({
+					...await this.htmlTemplateService.getCommonData(),
+					clientCtxJson: htmlSafeJsonStringify({
 						clip: _clip,
 					}),
-				});
+				}));
 			} else {
 				return await renderBase(reply);
 			}
@@ -700,12 +673,11 @@ export class ClientServerService {
 					reply.header('X-Robots-Tag', 'noimageai');
 					reply.header('X-Robots-Tag', 'noai');
 				}
-				return await reply.view('gallery-post', {
-					post: _post,
+				return await HtmlTemplateService.replyHtml(reply, GalleryPostPage({
+					galleryPost: _post,
 					profile,
-					avatarUrl: _post.user.avatarUrl,
-					...await this.generateCommonPugData(this.meta),
-				});
+					...await this.htmlTemplateService.getCommonData(),
+				}));
 			} else {
 				return await renderBase(reply);
 			}
@@ -720,10 +692,10 @@ export class ClientServerService {
 			if (channel) {
 				const _channel = await this.channelEntityService.pack(channel);
 				reply.header('Cache-Control', 'public, max-age=15');
-				return await reply.view('channel', {
+				return await HtmlTemplateService.replyHtml(reply, ChannelPage({
 					channel: _channel,
-					...await this.generateCommonPugData(this.meta),
-				});
+					...await this.htmlTemplateService.getCommonData(),
+				}));
 			} else {
 				return await renderBase(reply);
 			}
@@ -738,10 +710,10 @@ export class ClientServerService {
 			if (game) {
 				const _game = await this.reversiGameEntityService.packDetail(game);
 				reply.header('Cache-Control', 'public, max-age=3600');
-				return await reply.view('reversi-game', {
-					game: _game,
-					...await this.generateCommonPugData(this.meta),
-				});
+				return await HtmlTemplateService.replyHtml(reply, ReversiGamePage({
+					reversiGame: _game,
+					...await this.htmlTemplateService.getCommonData(),
+				}));
 			} else {
 				return await renderBase(reply);
 			}
@@ -757,10 +729,10 @@ export class ClientServerService {
 			if (announcement) {
 				const _announcement = await this.announcementEntityService.pack(announcement);
 				reply.header('Cache-Control', 'public, max-age=3600');
-				return await reply.view('announcement', {
+				return await HtmlTemplateService.replyHtml(reply, AnnouncementPage({
 					announcement: _announcement,
-					...await this.generateCommonPugData(this.meta),
-				});
+					...await this.htmlTemplateService.getCommonData(),
+				}));
 			} else {
 				return await renderBase(reply);
 			}
@@ -793,13 +765,13 @@ export class ClientServerService {
 			const _user = await this.userEntityService.pack(user);
 
 			reply.header('Cache-Control', 'public, max-age=3600');
-			return await reply.view('base-embed', {
+			return await HtmlTemplateService.replyHtml(reply, BaseEmbed({
 				title: this.meta.name ?? 'Misskey',
-				...await this.generateCommonPugData(this.meta),
-				embedCtx: htmlSafeJsonStringify({
+				...await this.htmlTemplateService.getCommonData(),
+				embedCtxJson: htmlSafeJsonStringify({
 					user: _user,
 				}),
-			});
+			}));
 		});
 
 		fastify.get<{ Params: { note: string; } }>('/embed/notes/:note', async (request, reply) => {
@@ -819,13 +791,13 @@ export class ClientServerService {
 			const _note = await this.noteEntityService.pack(note, null, { detail: true });
 
 			reply.header('Cache-Control', 'public, max-age=3600');
-			return await reply.view('base-embed', {
+			return await HtmlTemplateService.replyHtml(reply, BaseEmbed({
 				title: this.meta.name ?? 'Misskey',
-				...await this.generateCommonPugData(this.meta),
-				embedCtx: htmlSafeJsonStringify({
+				...await this.htmlTemplateService.getCommonData(),
+				embedCtxJson: htmlSafeJsonStringify({
 					note: _note,
 				}),
-			});
+			}));
 		});
 
 		fastify.get<{ Params: { clip: string; } }>('/embed/clips/:clip', async (request, reply) => {
@@ -840,48 +812,46 @@ export class ClientServerService {
 			const _clip = await this.clipEntityService.pack(clip);
 
 			reply.header('Cache-Control', 'public, max-age=3600');
-			return await reply.view('base-embed', {
+			return await HtmlTemplateService.replyHtml(reply, BaseEmbed({
 				title: this.meta.name ?? 'Misskey',
-				...await this.generateCommonPugData(this.meta),
-				embedCtx: htmlSafeJsonStringify({
+				...await this.htmlTemplateService.getCommonData(),
+				embedCtxJson: htmlSafeJsonStringify({
 					clip: _clip,
 				}),
-			});
+			}));
 		});
 
 		fastify.get('/embed/*', async (request, reply) => {
 			reply.removeHeader('X-Frame-Options');
 
 			reply.header('Cache-Control', 'public, max-age=3600');
-			return await reply.view('base-embed', {
+			return await HtmlTemplateService.replyHtml(reply, BaseEmbed({
 				title: this.meta.name ?? 'Misskey',
-				...await this.generateCommonPugData(this.meta),
-			});
+				...await this.htmlTemplateService.getCommonData(),
+			}));
 		});
 
 		fastify.get('/_info_card_', async (request, reply) => {
 			reply.removeHeader('X-Frame-Options');
 
-			return await reply.view('info-card', {
+			return await HtmlTemplateService.replyHtml(reply, InfoCardPage({
 				version: this.config.version,
-				host: this.config.host,
+				config: this.config,
 				meta: this.meta,
-				originalUsersCount: await this.usersRepository.countBy({ host: IsNull() }),
-				originalNotesCount: await this.notesRepository.countBy({ userHost: IsNull() }),
-			});
+			}));
 		});
 		//#endregion
 
 		fastify.get('/bios', async (request, reply) => {
-			return await reply.view('bios', {
+			return await HtmlTemplateService.replyHtml(reply, BiosPage({
 				version: this.config.version,
-			});
+			}));
 		});
 
 		fastify.get('/cli', async (request, reply) => {
-			return await reply.view('cli', {
+			return await HtmlTemplateService.replyHtml(reply, CliPage({
 				version: this.config.version,
-			});
+			}));
 		});
 
 		const override = (source: string, target: string, depth = 0) =>
@@ -904,7 +874,7 @@ export class ClientServerService {
 				reply.header('Clear-Site-Data', '"*"');
 			}
 			reply.header('Set-Cookie', 'http-flush-failed=1; Path=/flush; Max-Age=60');
-			return await reply.view('flush');
+			return await HtmlTemplateService.replyHtml(reply, FlushPage());
 		});
 
 		// streamingに非WebSocketリクエストが来た場合にbase htmlをキャシュ付きで返すと、Proxy等でそのパスがキャッシュされておかしくなる
@@ -930,10 +900,10 @@ export class ClientServerService {
 			});
 			reply.code(500);
 			reply.header('Cache-Control', 'max-age=10, must-revalidate');
-			return await reply.view('error', {
+			return await HtmlTemplateService.replyHtml(reply, ErrorPage({
 				code: error.code,
 				id: errId,
-			});
+			}));
 		});
 
 		done();

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

@@ -0,0 +1,105 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and misskey-project
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import { dirname } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { promises as fsp } from 'node:fs';
+import { languages } from 'i18n/const';
+import { Injectable, Inject } from '@nestjs/common';
+import { DI } from '@/di-symbols.js';
+import { bindThis } from '@/decorators.js';
+import { htmlSafeJsonStringify } from '@/misc/json-stringify-html-safe.js';
+import { MetaEntityService } from '@/core/entities/MetaEntityService.js';
+import type { FastifyReply } from 'fastify';
+import type { Config } from '@/config.js';
+import type { MiMeta } from '@/models/Meta.js';
+import type { CommonData } from './views/_.js';
+
+const _filename = fileURLToPath(import.meta.url);
+const _dirname = dirname(_filename);
+
+const frontendVitePublic = `${_dirname}/../../../../frontend/public/`;
+const frontendEmbedVitePublic = `${_dirname}/../../../../frontend-embed/public/`;
+
+@Injectable()
+export class HtmlTemplateService {
+	private frontendBootloadersFetched = false;
+	public frontendBootloaderJs: string | null = null;
+	public frontendBootloaderCss: string | null = null;
+	public frontendEmbedBootloaderJs: string | null = null;
+	public frontendEmbedBootloaderCss: string | null = null;
+
+	constructor(
+		@Inject(DI.config)
+		private config: Config,
+
+		@Inject(DI.meta)
+		private meta: MiMeta,
+
+		private metaEntityService: MetaEntityService,
+	) {
+	}
+
+	@bindThis
+	private async prepareFrontendBootloaders() {
+		if (this.frontendBootloadersFetched) return;
+		this.frontendBootloadersFetched = true;
+
+		const [bootJs, bootCss, embedBootJs, embedBootCss] = await Promise.all([
+			fsp.readFile(`${frontendVitePublic}loader/boot.js`, 'utf-8').catch(() => null),
+			fsp.readFile(`${frontendVitePublic}loader/style.css`, 'utf-8').catch(() => null),
+			fsp.readFile(`${frontendEmbedVitePublic}loader/boot.js`, 'utf-8').catch(() => null),
+			fsp.readFile(`${frontendEmbedVitePublic}loader/style.css`, 'utf-8').catch(() => null),
+		]);
+
+		if (bootJs != null) {
+			this.frontendBootloaderJs = bootJs;
+		}
+
+		if (bootCss != null) {
+			this.frontendBootloaderCss = bootCss;
+		}
+
+		if (embedBootJs != null) {
+			this.frontendEmbedBootloaderJs = embedBootJs;
+		}
+
+		if (embedBootCss != null) {
+			this.frontendEmbedBootloaderCss = embedBootCss;
+		}
+	}
+
+	@bindThis
+	public async getCommonData(): Promise<CommonData> {
+		await this.prepareFrontendBootloaders();
+
+		return {
+			version: this.config.version,
+			config: this.config,
+			langs: [...languages],
+			instanceName: this.meta.name ?? 'Misskey',
+			icon: this.meta.iconUrl,
+			appleTouchIcon: this.meta.app512IconUrl,
+			themeColor: this.meta.themeColor,
+			serverErrorImageUrl: this.meta.serverErrorImageUrl ?? 'https://xn--931a.moe/assets/error.jpg',
+			infoImageUrl: this.meta.infoImageUrl ?? 'https://xn--931a.moe/assets/info.jpg',
+			notFoundImageUrl: this.meta.notFoundImageUrl ?? 'https://xn--931a.moe/assets/not-found.jpg',
+			instanceUrl: this.config.url,
+			metaJson: htmlSafeJsonStringify(await this.metaEntityService.packDetailed(this.meta)),
+			now: Date.now(),
+			federationEnabled: this.meta.federation !== 'none',
+			frontendBootloaderJs: this.frontendBootloaderJs,
+			frontendBootloaderCss: this.frontendBootloaderCss,
+			frontendEmbedBootloaderJs: this.frontendEmbedBootloaderJs,
+			frontendEmbedBootloaderCss: this.frontendEmbedBootloaderCss,
+		};
+	}
+
+	public static async replyHtml(reply: FastifyReply, html: string | Promise<string>) {
+		reply.header('Content-Type', 'text/html; charset=utf-8');
+		const _html = await html;
+		return reply.send(_html);
+	}
+}

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

@@ -4,8 +4,7 @@
  */
 
 import { Inject, Injectable } from '@nestjs/common';
-import { summaly } from '@misskey-dev/summaly';
-import { SummalyResult } from '@misskey-dev/summaly/built/summary.js';
+import type { SummalyResult } from '@misskey-dev/summaly/built/summary.js';
 import { DI } from '@/di-symbols.js';
 import type { Config } from '@/config.js';
 import { HttpRequestService } from '@/core/HttpRequestService.js';
@@ -113,7 +112,7 @@ export class UrlPreviewService {
 		}
 	}
 
-	private fetchSummary(url: string, meta: MiMeta, lang?: string): Promise<SummalyResult> {
+	private async fetchSummary(url: string, meta: MiMeta, lang?: string): Promise<SummalyResult> {
 		const agent = this.config.proxy
 			? {
 				http: this.httpRequestService.httpAgent,
@@ -121,6 +120,8 @@ export class UrlPreviewService {
 			}
 			: undefined;
 
+		const { summaly } = await import('@misskey-dev/summaly');
+
 		return summaly(url, {
 			followRedirects: this.meta.urlPreviewAllowRedirect,
 			lang: lang ?? 'ja-JP',

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

@@ -1,46 +0,0 @@
-/*
- * SPDX-FileCopyrightText: syuilo and misskey-project
- *
- * SPDX-License-Identifier: AGPL-3.0-only
- */
-
-* {
-	font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
-}
-
-html {
-	background: #ffb4e1;
-}
-
-main {
-	background: #dedede;
-}
-main > .tabs {
-	padding: 16px;
-	border-bottom: solid 4px #c3c3c3;
-}
-
-#lsEditor > .adder {
-	margin: 16px;
-	padding: 16px;
-	border: solid 2px #c3c3c3;
-}
-#lsEditor > .adder > textarea {
-	display: block;
-	width: 100%;
-	min-height: 5em;
-	box-sizing: border-box;
-}
-#lsEditor > .record {
-	padding: 16px;
-	border-bottom: solid 1px #c3c3c3;
-}
-#lsEditor > .record > header {
-	font-weight: bold;
-}
-#lsEditor > .record > textarea {
-	display: block;
-	width: 100%;
-	min-height: 5em;
-	box-sizing: border-box;
-}

packages/backend/src/server/web/bios.js

@@ -1,92 +0,0 @@
-/*
- * SPDX-FileCopyrightText: syuilo and misskey-project
- * SPDX-License-Identifier: AGPL-3.0-only
- */
-
-'use strict';
-
-window.onload = async () => {
-	const account = JSON.parse(localStorage.getItem('account'));
-	const i = account.token;
-
-	const api = (endpoint, data = {}) => {
-		const promise = new Promise((resolve, reject) => {
-			// Append a credential
-			if (i) data.i = i;
-
-			// Send request
-			window.fetch(endpoint.indexOf('://') > -1 ? endpoint : `/api/${endpoint}`, {
-				method: 'POST',
-				body: JSON.stringify(data),
-				credentials: 'omit',
-				cache: 'no-cache'
-			}).then(async (res) => {
-				const body = res.status === 204 ? null : await res.json();
-
-				if (res.status === 200) {
-					resolve(body);
-				} else if (res.status === 204) {
-					resolve();
-				} else {
-					reject(body.error);
-				}
-			}).catch(reject);
-		});
-
-		return promise;
-	};
-
-	const content = document.getElementById('content');
-
-	document.getElementById('ls').addEventListener('click', () => {
-		content.innerHTML = '';
-
-		const lsEditor = document.createElement('div');
-		lsEditor.id = 'lsEditor';
-
-		const adder = document.createElement('div');
-		adder.classList.add('adder');
-		const addKeyInput = document.createElement('input');
-		const addValueTextarea = document.createElement('textarea');
-		const addButton = document.createElement('button');
-		addButton.textContent = 'add';
-		addButton.addEventListener('click', () => {
-			localStorage.setItem(addKeyInput.value, addValueTextarea.value);
-			location.reload();
-		});
-
-		adder.appendChild(addKeyInput);
-		adder.appendChild(addValueTextarea);
-		adder.appendChild(addButton);
-		lsEditor.appendChild(adder);
-
-		for (let i = 0; i < localStorage.length; i++) {
-			const k = localStorage.key(i);
-			const record = document.createElement('div');
-			record.classList.add('record');
-			const header = document.createElement('header');
-			header.textContent = k;
-			const textarea = document.createElement('textarea');
-			textarea.textContent = localStorage.getItem(k);
-			const saveButton = document.createElement('button');
-			saveButton.textContent = 'save';
-			saveButton.addEventListener('click', () => {
-				localStorage.setItem(k, textarea.value);
-				location.reload();
-			});
-			const removeButton = document.createElement('button');
-			removeButton.textContent = 'remove';
-			removeButton.addEventListener('click', () => {
-				localStorage.removeItem(k);
-				location.reload();
-			});
-			record.appendChild(header);
-			record.appendChild(textarea);
-			record.appendChild(saveButton);
-			record.appendChild(removeButton);
-			lsEditor.appendChild(record);
-		}
-
-		content.appendChild(lsEditor);
-	});
-};

packages/backend/src/server/web/boot.embed.js

@@ -1,208 +0,0 @@
-/*
- * SPDX-FileCopyrightText: syuilo and misskey-project
- * SPDX-License-Identifier: AGPL-3.0-only
- */
-
-'use strict';
-
-// ブロックの中に入れないと、定義した変数がブラウザのグローバルスコープに登録されてしまい邪魔なので
-(async () => {
-	window.onerror = (e) => {
-		console.error(e);
-		renderError('SOMETHING_HAPPENED');
-	};
-	window.onunhandledrejection = (e) => {
-		console.error(e);
-		renderError('SOMETHING_HAPPENED_IN_PROMISE');
-	};
-
-	let forceError = localStorage.getItem('forceError');
-	if (forceError != null) {
-		renderError('FORCED_ERROR', 'This error is forced by having forceError in local storage.');
-		return;
-	}
-
-	// パラメータに応じてsplashのスタイルを変更
-	const params = new URLSearchParams(location.search);
-	if (params.has('rounded') && params.get('rounded') === 'false') {
-		document.documentElement.classList.add('norounded');
-	}
-	if (params.has('border') && params.get('border') === 'false') {
-		document.documentElement.classList.add('noborder');
-	}
-
-	//#region Detect language & fetch translations
-	const supportedLangs = LANGS;
-	/** @type { string } */
-	let lang = localStorage.getItem('lang');
-	if (lang == null || !supportedLangs.includes(lang)) {
-		if (supportedLangs.includes(navigator.language)) {
-			lang = navigator.language;
-		} else {
-			lang = supportedLangs.find(x => x.split('-')[0] === navigator.language);
-
-			// Fallback
-			if (lang == null) lang = 'en-US';
-		}
-	}
-
-	// for https://github.com/misskey-dev/misskey/issues/10202
-	if (lang == null || lang.toString == null || lang.toString() === 'null') {
-		console.error('invalid lang value detected!!!', typeof lang, lang);
-		lang = 'en-US';
-	}
-	//#endregion
-
-	//#region Script
-	async function importAppScript() {
-		await import(CLIENT_ENTRY ? `/embed_vite/${CLIENT_ENTRY.replace('scripts', lang)}` : '/embed_vite/src/boot.ts')
-			.catch(async e => {
-				console.error(e);
-				renderError('APP_IMPORT');
-			});
-	}
-
-	// タイミングによっては、この時点でDOMの構築が済んでいる場合とそうでない場合とがある
-	if (document.readyState !== 'loading') {
-		importAppScript();
-	} else {
-		window.addEventListener('DOMContentLoaded', () => {
-			importAppScript();
-		});
-	}
-	//#endregion
-
-	async function addStyle(styleText) {
-		let css = document.createElement('style');
-		css.appendChild(document.createTextNode(styleText));
-		document.head.appendChild(css);
-	}
-
-	async function renderError(code) {
-		// Cannot set property 'innerHTML' of null を回避
-		if (document.readyState === 'loading') {
-			await new Promise(resolve => window.addEventListener('DOMContentLoaded', resolve));
-		}
-
-		let messages = null;
-		const bootloaderLocales = localStorage.getItem('bootloaderLocales');
-		if (bootloaderLocales) {
-			messages = JSON.parse(bootloaderLocales);
-		}
-		if (!messages) {
-			// older version of misskey does not store bootloaderLocales, stores locale as a whole
-			const legacyLocale = localStorage.getItem('locale');
-			if (legacyLocale) {
-				const parsed = JSON.parse(legacyLocale);
-				messages = {
-					...(parsed._bootErrors ?? {}),
-					reload: parsed.reload,
-				};
-			}
-		}
-		if (!messages) messages = {};
-
-		const title = messages?.title || 'Failed to initialize Misskey';
-		const reload = messages?.reload || 'Reload';
-
-		document.body.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" /><path d="M12 9v4" /><path d="M12 16v.01" /></svg>
-		<div class="message">${title}</div>
-		<div class="submessage">Error Code: ${code}</div>
-		<button onclick="location.reload(!0)">
-			<div>${reload}</div>
-		</button>`;
-		addStyle(`
-		#misskey_app,
-		#splash {
-			display: none !important;
-		}
-
-		html,
-		body {
-			margin: 0;
-		}
-
-		body {
-			position: relative;
-			color: #dee7e4;
-			font-family: Hiragino Maru Gothic Pro, BIZ UDGothic, Roboto, HelveticaNeue, Arial, sans-serif;
-			line-height: 1.35;
-			display: flex;
-			flex-direction: column;
-			align-items: center;
-			justify-content: center;
-			min-height: 100vh;
-			margin: 0;
-			padding: 24px;
-			box-sizing: border-box;
-			overflow: hidden;
-
-			border-radius: var(--radius, 12px);
-			border: 1px solid rgba(231, 255, 251, 0.14);
-		}
-
-		body::before {
-			content: '';
-			position: fixed;
-			top: 0;
-			left: 0;
-			width: 100%;
-			height: 100%;
-			background: #192320;
-			border-radius: var(--radius, 12px);
-			z-index: -1;
-		}
-
-		html.embed.norounded body,
-		html.embed.norounded body::before {
-			border-radius: 0;
-		}
-
-		html.embed.noborder body {
-			border: none;
-		}
-
-		.icon {
-			max-width: 60px;
-			width: 100%;
-			height: auto;
-			margin-bottom: 20px;
-			color: #dec340;
-		}
-
-		.message {
-			text-align: center;
-			font-size: 20px;
-			font-weight: 700;
-			margin-bottom: 20px;
-		}
-
-		.submessage {
-			text-align: center;
-			font-size: 90%;
-			margin-bottom: 7.5px;
-		}
-
-		.submessage:last-of-type {
-			margin-bottom: 20px;
-		}
-
-		button {
-			padding: 7px 14px;
-			min-width: 100px;
-			font-weight: 700;
-			font-family: Hiragino Maru Gothic Pro, BIZ UDGothic, Roboto, HelveticaNeue, Arial, sans-serif;
-			line-height: 1.35;
-			border-radius: 99rem;
-			background-color: #b4e900;
-			color: #192320;
-			border: none;
-			cursor: pointer;
-			-webkit-tap-highlight-color: transparent;
-		}
-
-		button:hover {
-			background-color: #c6ff03;
-		}`);
-	}
-})();

packages/backend/src/server/web/boot.js

@@ -1,336 +0,0 @@
-/*
- * SPDX-FileCopyrightText: syuilo and misskey-project
- * SPDX-License-Identifier: AGPL-3.0-only
- */
-
-'use strict';
-
-// ブロックの中に入れないと、定義した変数がブラウザのグローバルスコープに登録されてしまい邪魔なので
-(async () => {
-	window.onerror = (e) => {
-		console.error(e);
-		renderError('SOMETHING_HAPPENED', e);
-	};
-	window.onunhandledrejection = (e) => {
-		console.error(e);
-		renderError('SOMETHING_HAPPENED_IN_PROMISE', e.reason || e);
-	};
-
-	let forceError = localStorage.getItem('forceError');
-	if (forceError != null) {
-		renderError('FORCED_ERROR', 'This error is forced by having forceError in local storage.');
-		return;
-	}
-
-	//#region Detect language
-	const supportedLangs = LANGS;
-	/** @type { string } */
-	let lang = localStorage.getItem('lang');
-	if (lang == null || !supportedLangs.includes(lang)) {
-		if (supportedLangs.includes(navigator.language)) {
-			lang = navigator.language;
-		} else {
-			lang = supportedLangs.find(x => x.split('-')[0] === navigator.language);
-
-			// Fallback
-			if (lang == null) lang = 'en-US';
-		}
-	}
-
-	// for https://github.com/misskey-dev/misskey/issues/10202
-	if (lang == null || lang.toString == null || lang.toString() === 'null') {
-		console.error('invalid lang value detected!!!', typeof lang, lang);
-		lang = 'en-US';
-	}
-	//#endregion
-
-	//#region Script
-	async function importAppScript() {
-		await import(CLIENT_ENTRY ? `/vite/${CLIENT_ENTRY.replace('scripts', lang)}` : '/vite/src/_boot_.ts')
-			.catch(async e => {
-				console.error(e);
-				renderError('APP_IMPORT', e);
-			});
-	}
-
-	// タイミングによっては、この時点でDOMの構築が済んでいる場合とそうでない場合とがある
-	if (document.readyState !== 'loading') {
-		importAppScript();
-	} else {
-		window.addEventListener('DOMContentLoaded', () => {
-			importAppScript();
-		});
-	}
-	//#endregion
-
-	let isSafeMode = (localStorage.getItem('isSafeMode') === 'true');
-
-	if (!isSafeMode) {
-		const urlParams = new URLSearchParams(window.location.search);
-
-		if (urlParams.has('safemode') && urlParams.get('safemode') === 'true') {
-			localStorage.setItem('isSafeMode', 'true');
-			isSafeMode = true;
-		}
-	}
-
-	//#region Theme
-	if (!isSafeMode) {
-		const theme = localStorage.getItem('theme');
-		if (theme) {
-			for (const [k, v] of Object.entries(JSON.parse(theme))) {
-				document.documentElement.style.setProperty(`--MI_THEME-${k}`, v.toString());
-
-				// HTMLの theme-color 適用
-				if (k === 'htmlThemeColor') {
-					for (const tag of document.head.children) {
-						if (tag.tagName === 'META' && tag.getAttribute('name') === 'theme-color') {
-							tag.setAttribute('content', v);
-							break;
-						}
-					}
-				}
-			}
-		}
-	}
-
-	const colorScheme = localStorage.getItem('colorScheme');
-	if (colorScheme) {
-		document.documentElement.style.setProperty('color-scheme', colorScheme);
-	}
-	//#endregion
-
-	const fontSize = localStorage.getItem('fontSize');
-	if (fontSize) {
-		document.documentElement.classList.add('f-' + fontSize);
-	}
-
-	const useSystemFont = localStorage.getItem('useSystemFont');
-	if (useSystemFont) {
-		document.documentElement.classList.add('useSystemFont');
-	}
-
-	if (!isSafeMode) {
-		const customCss = localStorage.getItem('customCss');
-		if (customCss && customCss.length > 0) {
-			const style = document.createElement('style');
-			style.innerHTML = customCss;
-			document.head.appendChild(style);
-		}
-	}
-
-	async function addStyle(styleText) {
-		let css = document.createElement('style');
-		css.appendChild(document.createTextNode(styleText));
-		document.head.appendChild(css);
-	}
-
-	async function renderError(code, details) {
-		// Cannot set property 'innerHTML' of null を回避
-		if (document.readyState === 'loading') {
-			await new Promise(resolve => window.addEventListener('DOMContentLoaded', resolve));
-		}
-
-		let messages = null;
-		const bootloaderLocales = localStorage.getItem('bootloaderLocales');
-		if (bootloaderLocales) {
-			messages = JSON.parse(bootloaderLocales);
-		}
-		if (!messages) {
-			// older version of misskey does not store bootloaderLocales, stores locale as a whole
-			const legacyLocale = localStorage.getItem('locale');
-			if (legacyLocale) {
-				const parsed = JSON.parse(legacyLocale);
-				messages = {
-					...(parsed._bootErrors ?? {}),
-					reload: parsed.reload,
-				};
-			}
-		}
-		if (!messages) messages = {};
-
-		messages = Object.assign({
-			title: 'Failed to initialize Misskey',
-			solution: 'The following actions may solve the problem.',
-			solution1: 'Update your os and browser',
-			solution2: 'Disable an adblocker',
-			solution3: 'Clear the browser cache',
-			solution4: '(Tor Browser) Set dom.webaudio.enabled to true',
-			otherOption: 'Other options',
-			otherOption1: 'Clear preferences and cache',
-			otherOption2: 'Start the simple client',
-			otherOption3: 'Start the repair tool',
-			otherOption4: 'Start Misskey in safe mode',
-			reload: 'Reload',
-		}, messages);
-
-		const safeModeUrl = new URL(window.location.href);
-		safeModeUrl.searchParams.set('safemode', 'true');
-
-		let errorsElement = document.getElementById('errors');
-
-		if (!errorsElement) {
-			document.body.innerHTML = `
-			<svg class="icon-warning" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-				<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-				<path d="M12 9v2m0 4v.01"></path>
-				<path d="M5 19h14a2 2 0 0 0 1.84 -2.75l-7.1 -12.25a2 2 0 0 0 -3.5 0l-7.1 12.25a2 2 0 0 0 1.75 2.75"></path>
-			</svg>
-			<h1>${messages.title}</h1>
-			<button class="button-big" onclick="location.reload(true);">
-				<span class="button-label-big">${messages?.reload}</span>
-			</button>
-			<p><b>${messages.solution}</b></p>
-			<p>${messages.solution1}</p>
-			<p>${messages.solution2}</p>
-			<p>${messages.solution3}</p>
-			<p>${messages.solution4}</p>
-			<details style="color: #86b300;">
-				<summary>${messages.otherOption}</summary>
-				<a href="${safeModeUrl}">
-					<button class="button-small">
-						<span class="button-label-small">${messages.otherOption4}</span>
-					</button>
-				</a>
-				<br>
-				<a href="/flush">
-					<button class="button-small">
-						<span class="button-label-small">${messages.otherOption1}</span>
-					</button>
-				</a>
-				<br>
-				<a href="/cli">
-					<button class="button-small">
-						<span class="button-label-small">${messages.otherOption2}</span>
-					</button>
-				</a>
-				<br>
-				<a href="/bios">
-					<button class="button-small">
-						<span class="button-label-small">${messages.otherOption3}</span>
-					</button>
-				</a>
-			</details>
-			<br>
-			<div id="errors"></div>
-			`;
-			errorsElement = document.getElementById('errors');
-		}
-		const detailsElement = document.createElement('details');
-		detailsElement.id = 'errorInfo';
-		detailsElement.innerHTML = `
-		<br>
-		<summary>
-			<code>ERROR CODE: ${code}</code>
-		</summary>
-		<code>${details.toString()} ${JSON.stringify(details)}</code>`;
-		errorsElement.appendChild(detailsElement);
-		addStyle(`
-		* {
-			font-family: BIZ UDGothic, Roboto, HelveticaNeue, Arial, sans-serif;
-		}
-
-		#misskey_app,
-		#splash {
-			display: none !important;
-		}
-
-		body,
-		html {
-			background-color: #222;
-			color: #dfddcc;
-			justify-content: center;
-			margin: auto;
-			padding: 10px;
-			text-align: center;
-		}
-
-		button {
-			border-radius: 999px;
-			padding: 0px 12px 0px 12px;
-			border: none;
-			cursor: pointer;
-			margin-bottom: 12px;
-		}
-
-		.button-big {
-			background: linear-gradient(90deg, rgb(134, 179, 0), rgb(74, 179, 0));
-			line-height: 50px;
-		}
-
-		.button-big:hover {
-			background: rgb(153, 204, 0);
-		}
-
-		.button-small {
-			background: #444;
-			line-height: 40px;
-		}
-
-		.button-small:hover {
-			background: #555;
-		}
-
-		.button-label-big {
-			color: #222;
-			font-weight: bold;
-			font-size: 1.2em;
-			padding: 12px;
-		}
-
-		.button-label-small {
-			color: rgb(153, 204, 0);
-			font-size: 16px;
-			padding: 12px;
-		}
-
-		a {
-			color: rgb(134, 179, 0);
-			text-decoration: none;
-		}
-
-		p,
-		li {
-			font-size: 16px;
-		}
-
-		.icon-warning {
-			color: #dec340;
-			height: 4rem;
-			padding-top: 2rem;
-		}
-
-		h1 {
-			font-size: 1.5em;
-			margin: 1em;
-		}
-
-		code {
-			font-family: Fira, FiraCode, monospace;
-		}
-
-		#errorInfo {
-			background: #333;
-			margin-bottom: 2rem;
-			padding: 0.5rem 1rem;
-			width: 40rem;
-			border-radius: 10px;
-			justify-content: center;
-			margin: auto;
-		}
-
-		#errorInfo summary {
-			cursor: pointer;
-		}
-
-		#errorInfo summary > * {
-			display: inline;
-		}
-
-		@media screen and (max-width: 500px) {
-			#errorInfo {
-				width: 50%;
-			}
-		}`);
-	}
-})();

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

@@ -1,25 +0,0 @@
-/*
- * SPDX-FileCopyrightText: syuilo and misskey-project
- *
- * SPDX-License-Identifier: AGPL-3.0-only
- */
-
-* {
-	font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
-}
-
-html {
-	background: #ffb4e1;
-}
-
-main {
-	background: #dedede;
-}
-
-#tl > div {
-	padding: 16px;
-	border-bottom: solid 1px #c3c3c3;
-}
-#tl > div > header {
-	font-weight: bold;
-}

packages/backend/src/server/web/cli.js

@@ -1,63 +0,0 @@
-/*
- * SPDX-FileCopyrightText: syuilo and misskey-project
- * SPDX-License-Identifier: AGPL-3.0-only
- */
-
-'use strict';
-
-window.onload = async () => {
-	const account = JSON.parse(localStorage.getItem('account'));
-	const i = account.token;
-
-	const api = (endpoint, data = {}) => {
-		const promise = new Promise((resolve, reject) => {
-			// Append a credential
-			if (i) data.i = i;
-
-			// Send request
-			fetch(endpoint.indexOf('://') > -1 ? endpoint : `/api/${endpoint}`, {
-				headers: {
-					'Content-Type': 'application/json'
-				},
-				method: 'POST',
-				body: JSON.stringify(data),
-				credentials: 'omit',
-				cache: 'no-cache'
-			}).then(async (res) => {
-				const body = res.status === 204 ? null : await res.json();
-
-				if (res.status === 200) {
-					resolve(body);
-				} else if (res.status === 204) {
-					resolve();
-				} else {
-					reject(body.error);
-				}
-			}).catch(reject);
-		});
-
-		return promise;
-	};
-
-	document.getElementById('submit').addEventListener('click', () => {
-		api('notes/create', {
-			text: document.getElementById('text').value
-		}).then(() => {
-			location.reload();
-		});
-	});
-
-	api('notes/timeline').then(notes => {
-		const tl = document.getElementById('tl');
-		for (const note of notes) {
-			const el = document.createElement('div');
-			const name = document.createElement('header');
-			name.textContent = `${note.user.name} @${note.user.username}`;
-			const text = document.createElement('div');
-			text.textContent = `${note.text}`;
-			el.appendChild(name);
-			el.appendChild(text);
-			tl.appendChild(el);
-		}
-	});
-};

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

@@ -1,111 +0,0 @@
-/*
- * SPDX-FileCopyrightText: syuilo and misskey-project
- *
- * SPDX-License-Identifier: AGPL-3.0-only
- */
-
-* {
-	font-family: BIZ UDGothic, Roboto, HelveticaNeue, Arial, sans-serif;
-}
-
-#misskey_app,
-#splash {
-	display: none !important;
-}
-
-body,
-html {
-	background-color: #222;
-	color: #dfddcc;
-	justify-content: center;
-	margin: auto;
-	padding: 10px;
-	text-align: center;
-}
-
-button {
-	border-radius: 999px;
-	padding: 0px 12px 0px 12px;
-	border: none;
-	cursor: pointer;
-	margin-bottom: 12px;
-}
-
-.button-big {
-	background: linear-gradient(90deg, rgb(134, 179, 0), rgb(74, 179, 0));
-	line-height: 50px;
-}
-
-.button-big:hover {
-	background: rgb(153, 204, 0);
-}
-
-.button-small {
-	background: #444;
-	line-height: 40px;
-}
-
-.button-small:hover {
-	background: #555;
-}
-
-.button-label-big {
-	color: #222;
-	font-weight: bold;
-	font-size: 1.2em;
-	padding: 12px;
-}
-
-.button-label-small {
-	color: rgb(153, 204, 0);
-	font-size: 16px;
-	padding: 12px;
-}
-
-a {
-	color: rgb(134, 179, 0);
-	text-decoration: none;
-}
-
-p,
-li {
-	font-size: 16px;
-}
-
-.icon-warning {
-	color: #dec340;
-	height: 4rem;
-	padding-top: 2rem;
-}
-
-h1 {
-	font-size: 1.5em;
-	margin: 1em;
-}
-
-code {
-	display: block;
-	font-family: Fira, FiraCode, monospace;
-	background: #333;
-	padding: 0.5rem 1rem;
-	max-width: 40rem;
-	border-radius: 10px;
-	justify-content: center;
-	margin: auto;
-	white-space: pre-wrap;
-	word-break: break-word;
-}
-
-#errorInfo summary {
-	cursor: pointer;
-}
-
-#errorInfo summary>* {
-	display: inline;
-}
-
-@media screen and (max-width: 500px) {
-	#errorInfo {
-		width: 50%;
-	}
-}

packages/backend/src/server/web/error.js

@@ -1,40 +0,0 @@
-/*
- * SPDX-FileCopyrightText: syuilo and misskey-project
- * SPDX-License-Identifier: AGPL-3.0-only
- */
-
-'use strict';
-
-(() => {
-	document.addEventListener('DOMContentLoaded', () => {
-		const locale = JSON.parse(localStorage.getItem('locale') || '{}');
-
-		const messages = Object.assign({
-			title: 'Failed to initialize Misskey',
-			serverError: 'If reloading after a period of time does not resolve the problem, contact the server administrator with the following ERROR ID.',
-			solution: 'The following actions may solve the problem.',
-			solution1: 'Update your os and browser',
-			solution2: 'Disable an adblocker',
-			solution3: 'Clear the browser cache',
-			solution4: '(Tor Browser) Set dom.webaudio.enabled to true',
-			otherOption: 'Other options',
-			otherOption1: 'Clear preferences and cache',
-			otherOption2: 'Start the simple client',
-			otherOption3: 'Start the repair tool',
-		}, locale?._bootErrors || {});
-		const reload = locale?.reload || 'Reload';
-
-		const reloadEls = document.querySelectorAll('[data-i18n-reload]');
-		for (const el of reloadEls) {
-			el.textContent = reload;
-		}
-
-		const i18nEls = document.querySelectorAll('[data-i18n]');
-		for (const el of i18nEls) {
-			const key = el.dataset.i18n;
-			if (key && messages[key]) {
-				el.textContent = messages[key];
-			}
-		}
-	});
-})();

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

@@ -1,78 +0,0 @@
-/*
- * SPDX-FileCopyrightText: syuilo and misskey-project
- *
- * SPDX-License-Identifier: AGPL-3.0-only
- */
-
-html {
-	background-color: var(--MI_THEME-bg);
-	color: var(--MI_THEME-fg);
-}
-
-#splash {
-	position: fixed;
-	z-index: 10000;
-	top: 0;
-	left: 0;
-	width: 100vw;
-	height: 100vh;
-	cursor: wait;
-	background-color: var(--MI_THEME-bg);
-	opacity: 1;
-	transition: opacity 0.5s ease;
-}
-
-#splashIcon {
-	position: absolute;
-	top: 0;
-	right: 0;
-	bottom: 0;
-	left: 0;
-	margin: auto;
-	width: 64px;
-	height: 64px;
-	border-radius: 10px;
-	pointer-events: none;
-}
-
-#splashSpinner {
-	position: absolute;
-	top: 0;
-	right: 0;
-	bottom: 0;
-	left: 0;
-	margin: auto;
-	display: inline-block;
-	width: 28px;
-	height: 28px;
-	transform: translateY(70px);
-	color: var(--MI_THEME-accent);
-}
-
-#splashSpinner > .spinner {
-	position: absolute;
-	top: 0;
-	left: 0;
-	width: 28px;
-	height: 28px;
-	fill-rule: evenodd;
-	clip-rule: evenodd;
-	stroke-linecap: round;
-	stroke-linejoin: round;
-	stroke-miterlimit: 1.5;
-}
-#splashSpinner > .spinner.bg {
-	opacity: 0.275;
-}
-#splashSpinner > .spinner.fg {
-	animation: splashSpinner 0.5s linear infinite;
-}
-
-@keyframes splashSpinner {
-	0% {
-		transform: rotate(0deg);
-	}
-	100% {
-		transform: rotate(360deg);
-	}
-}

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

@@ -1,100 +0,0 @@
-/*
- * SPDX-FileCopyrightText: syuilo and misskey-project
- *
- * SPDX-License-Identifier: AGPL-3.0-only
- */
-
-html {
-	background-color: var(--MI_THEME-bg);
-	color: var(--MI_THEME-fg);
-}
-
-html.embed {
-	box-sizing: border-box;
-	background-color: transparent;
-	color-scheme: light dark;
-	max-width: 500px;
-}
-
-#splash {
-	position: fixed;
-	z-index: 10000;
-	top: 0;
-	left: 0;
-	width: 100vw;
-	height: 100vh;
-	cursor: wait;
-	background-color: var(--MI_THEME-bg);
-	opacity: 1;
-	transition: opacity 0.5s ease;
-}
-
-html.embed #splash {
-	box-sizing: border-box;
-	min-height: 300px;
-	border-radius: var(--radius, 12px);
-	border: 1px solid var(--MI_THEME-divider, #e8e8e8);
-}
-
-html.embed.norounded #splash {
-	border-radius: 0;
-}
-
-html.embed.noborder #splash {
-	border: none;
-}
-
-#splashIcon {
-	position: absolute;
-	top: 0;
-	right: 0;
-	bottom: 0;
-	left: 0;
-	margin: auto;
-	width: 64px;
-	height: 64px;
-	border-radius: 10px;
-	pointer-events: none;
-}
-
-#splashSpinner {
-	position: absolute;
-	top: 0;
-	right: 0;
-	bottom: 0;
-	left: 0;
-	margin: auto;
-	display: inline-block;
-	width: 28px;
-	height: 28px;
-	transform: translateY(70px);
-	color: var(--MI_THEME-accent);
-}
-
-#splashSpinner > .spinner {
-	position: absolute;
-	top: 0;
-	left: 0;
-	width: 28px;
-	height: 28px;
-	fill-rule: evenodd;
-	clip-rule: evenodd;
-	stroke-linecap: round;
-	stroke-linejoin: round;
-	stroke-miterlimit: 1.5;
-}
-#splashSpinner > .spinner.bg {
-	opacity: 0.275;
-}
-#splashSpinner > .spinner.fg {
-	animation: splashSpinner 0.5s linear infinite;
-}
-
-@keyframes splashSpinner {
-	0% {
-		transform: rotate(0deg);
-	}
-	100% {
-		transform: rotate(360deg);
-	}
-}

packages/backend/src/server/web/views/_.ts

@@ -0,0 +1,49 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and misskey-project
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import type { Config } from '@/config.js';
+
+export const comment = `<!--
+  _____ _         _
+ |     |_|___ ___| |_ ___ _ _
+ | | | | |_ -|_ -| '_| -_| | |
+ |_|_|_|_|___|___|_,_|___|_  |
+                         |___|
+ Thank you for using Misskey!
+ If you are reading this message... how about joining the development?
+ https://github.com/misskey-dev/misskey
+
+-->`;
+
+export const defaultDescription = '✨🌎✨ A interplanetary communication platform ✨🚀✨';
+
+export type MinimumCommonData = {
+	version: string;
+	config: Config;
+};
+
+export type CommonData = MinimumCommonData & {
+	langs: string[];
+	instanceName: string;
+	icon: string | null;
+	appleTouchIcon: string | null;
+	themeColor: string | null;
+	serverErrorImageUrl: string;
+	infoImageUrl: string;
+	notFoundImageUrl: string;
+	instanceUrl: string;
+	now: number;
+	federationEnabled: boolean;
+	frontendBootloaderJs: string | null;
+	frontendBootloaderCss: string | null;
+	frontendEmbedBootloaderJs: string | null;
+	frontendEmbedBootloaderCss: string | null;
+	metaJson?: string;
+	clientCtxJson?: string;
+};
+
+export type CommonPropsMinimum<T = Record<string, any>> = MinimumCommonData & T;
+
+export type CommonProps<T = Record<string, any>> = CommonData & T;

packages/backend/src/server/web/views/_splash.tsx

@@ -0,0 +1,26 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and misskey-project
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+export function Splash(props: {
+	icon?: string | null;
+}) {
+	return (
+		<div id="splash">
+			<img id="splashIcon" src={props.icon || '/static-assets/splash.png'} />
+			<div id="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)">
+						<circle cx="64" cy="64" r="64" style="fill:none;stroke:currentColor;stroke-width:24px;"/>
+					</g>
+				</svg>
+				<svg class="spinner fg" viewBox="0 0 152 152" xmlns="http://www.w3.org/2000/svg">
+					<g transform="matrix(1,0,0,1,12,12)">
+						<path d="M128,64C128,28.654 99.346,0 64,0C99.346,0 128,28.654 128,64Z" style="fill:none;stroke:currentColor;stroke-width:24px;"/>
+					</g>
+				</svg>
+			</div>
+		</div>
+	);
+}

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

@@ -1,21 +0,0 @@
-extends ./base
-
-block vars
-	- const title = announcement.title;
-	- const description = announcement.text.length > 100 ? announcement.text.slice(0, 100) + '…' : announcement.text;
-	- const url = `${config.url}/announcements/${announcement.id}`;
-
-block title
-	= `${title} | ${instanceName}`
-
-block desc
-	meta(name='description' content=description)
-
-block og
-	meta(property='og:type'        content='article')
-	meta(property='og:title'       content= title)
-	meta(property='og:description' content= description)
-	meta(property='og:url'         content= url)
-	if announcement.imageUrl
-		meta(property='og:image' content=announcement.imageUrl)
-		meta(property='twitter:card' content='summary_large_image')

packages/backend/src/server/web/views/announcement.tsx

@@ -0,0 +1,41 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and misskey-project
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import type { Packed } from '@/misc/json-schema.js';
+import type { CommonProps } from '@/server/web/views/_.js';
+import { Layout } from '@/server/web/views/base.js';
+
+export function AnnouncementPage(props: CommonProps<{
+	announcement: Packed<'Announcement'>;
+}>) {
+	const description = props.announcement.text.length > 100 ? props.announcement.text.slice(0, 100) + '…' : props.announcement.text;
+
+	function ogBlock() {
+		return (
+			<>
+				<meta property="og:type" content="article" />
+				<meta property="og:title" content={props.announcement.title} />
+				<meta property="og:description" content={description} />
+				<meta property="og:url" content={`${props.config.url}/announcements/${props.announcement.id}`} />
+				{props.announcement.imageUrl ? (
+					<>
+						<meta property="og:image" content={props.announcement.imageUrl} />
+						<meta property="twitter:card" content="summary_large_image" />
+					</>
+				) : null}
+			</>
+		);
+	}
+
+	return (
+		<Layout
+			{...props}
+			title={`${props.announcement.title} | ${props.instanceName}`}
+			desc={description}
+			ogSlot={ogBlock()}
+		>
+		</Layout>
+	);
+}

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

@@ -1,71 +0,0 @@
-block vars
-
-block loadClientEntry
-	- const entry = config.frontendEmbedEntry;
-
-doctype html
-
-html(class='embed')
-
-	head
-		meta(charset='utf-8')
-		meta(name='application-name' content='Misskey')
-		meta(name='referrer' content='origin')
-		meta(name='theme-color' content= themeColor || '#86b300')
-		meta(name='theme-color-orig' content= themeColor || '#86b300')
-		meta(property='og:site_name' content= instanceName || 'Misskey')
-		meta(property='instance_url' content= instanceUrl)
-		meta(name='viewport' content='width=device-width, initial-scale=1')
-		meta(name='format-detection' content='telephone=no,date=no,address=no,email=no,url=no')
-		link(rel='icon' href= icon || '/favicon.ico')
-		link(rel='apple-touch-icon' href= appleTouchIcon || '/apple-touch-icon.png')
-
-		if !config.frontendEmbedManifestExists
-				script(type="module" src="/embed_vite/@vite/client")
-
-		if Array.isArray(entry.css)
-			each href in entry.css
-				link(rel='stylesheet' href=`/embed_vite/${href}`)
-
-		title
-			block title
-				= title || 'Misskey'
-
-		block meta
-			meta(name='robots' content='noindex')
-
-		style
-			include ../style.embed.css
-
-		script.
-			var VERSION = "#{version}";
-			var CLIENT_ENTRY = !{JSON.stringify(entry.file)};
-
-		script(type='application/json' id='misskey_meta' data-generated-at=now)
-			!= metaJson
-
-		script(type='application/json' id='misskey_embedCtx' data-generated-at=now)
-			!= embedCtx
-
-		script
-			include ../boot.embed.js
-
-	body
-		noscript: p
-			| JavaScriptを有効にしてください
-			br
-			| Please turn on your JavaScript
-		div#splash
-			img#splashIcon(src= icon || '/static-assets/splash.png')
-			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)">
-						<circle cx="64" cy="64" r="64" style="fill:none;stroke:currentColor;stroke-width:24px;"/>
-					</g>
-				</svg>
-				<svg class="spinner fg" viewBox="0 0 152 152" xmlns="http://www.w3.org/2000/svg">
-					<g transform="matrix(1,0,0,1,12,12)">
-						<path d="M128,64C128,28.654 99.346,0 64,0C99.346,0 128,28.654 128,64Z" style="fill:none;stroke:currentColor;stroke-width:24px;"/>
-					</g>
-				</svg>
-		block content

packages/backend/src/server/web/views/base-embed.tsx

@@ -0,0 +1,88 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and misskey-project
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import { comment } from '@/server/web/views/_.js';
+import type { CommonProps } from '@/server/web/views/_.js';
+import { Splash } from '@/server/web/views/_splash.js';
+import type { PropsWithChildren, Children } from '@kitajs/html';
+
+export function BaseEmbed(props: PropsWithChildren<CommonProps<{
+	title?: string;
+	noindex?: boolean;
+	desc?: string;
+	img?: string;
+	serverErrorImageUrl?: string;
+	infoImageUrl?: string;
+	notFoundImageUrl?: string;
+	metaJson?: string;
+	embedCtxJson?: string;
+
+	titleSlot?: Children;
+	metaSlot?: Children;
+}>>) {
+	const now = Date.now();
+
+	// 変数名をsafeで始めることでエラーをスキップ
+	const safeMetaJson = props.metaJson;
+	const safeEmbedCtxJson = props.embedCtxJson;
+
+	return (
+		<>
+			{'<!DOCTYPE html>'}
+			{comment}
+			<html>
+				<head>
+					<meta charset="UTF-8" />
+					<meta name="application-name" content="Misskey" />
+					<meta name="referer" content="origin" />
+					<meta name="theme-color" content={props.themeColor ?? '#86b300'} />
+					<meta name="theme-color-orig" content={props.themeColor ?? '#86b300'} />
+					<meta property="og:site_name" content={props.instanceName || 'Misskey'} />
+					<meta property="instance_url" content={props.instanceUrl} />
+					<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover" />
+					<meta name="format-detection" content="telephone=no,date=no,address=no,email=no,url=no" />
+					<link rel="icon" href={props.icon ?? '/favicon.ico'} />
+					<link rel="apple-touch-icon" href={props.appleTouchIcon ?? '/apple-touch-icon.png'} />
+
+					{!props.config.frontendEmbedManifestExists ? <script type="module" src="/embed_vite/@vite/client"></script> : null}
+
+					{props.config.frontendEmbedEntry.css != null ? props.config.frontendEmbedEntry.css.map((href) => (
+						<link rel="stylesheet" href={`/embed_vite/${href}`} />
+					)) : null}
+
+					{props.titleSlot ?? <title safe>{props.title || 'Misskey'}</title>}
+
+					{props.metaSlot}
+
+					<meta name="robots" content="noindex" />
+
+					{props.frontendEmbedBootloaderCss != null ? <style safe>{props.frontendEmbedBootloaderCss}</style> : <link rel="stylesheet" href="/embed_vite/loader/style.css" />}
+
+					<script>
+						const VERSION = '{props.version}';
+						const CLIENT_ENTRY = {JSON.stringify(props.config.frontendEmbedEntry.file)};
+						const LANGS = {JSON.stringify(props.langs)};
+					</script>
+
+					{safeMetaJson != null ? <script type="application/json" id="misskey_meta" data-generated-at={now}>{safeMetaJson}</script> : null}
+					{safeEmbedCtxJson != null ? <script type="application/json" id="misskey_embedCtx" data-generated-at={now}>{safeEmbedCtxJson}</script> : null}
+
+					{props.frontendEmbedBootloaderJs != null ? <script>{props.frontendEmbedBootloaderJs}</script> : <script src="/embed_vite/loader/boot.js"></script>}
+				</head>
+				<body>
+					<noscript>
+						<p>
+							JavaScriptを有効にしてください<br />
+							Please turn on your JavaScript
+						</p>
+					</noscript>
+					<Splash icon={props.icon} />
+					{props.children}
+				</body>
+			</html>
+		</>
+	);
+}
+

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

@@ -1,100 +0,0 @@
-block vars
-
-block loadClientEntry
-	- const entry = config.frontendEntry;
-	- const baseUrl = config.url;
-
-doctype html
-
-//
-	-
-	  _____ _         _
-	 |     |_|___ ___| |_ ___ _ _
-	 | | | | |_ -|_ -| '_| -_| | |
-	 |_|_|_|_|___|___|_,_|___|_  |
-	                         |___|
-	 Thank you for using Misskey!
-	 If you are reading this message... how about joining the development?
-	 https://github.com/misskey-dev/misskey
-
-
-html
-
-	head
-		meta(charset='utf-8')
-		meta(name='application-name' content='Misskey')
-		meta(name='referrer' content='origin')
-		meta(name='theme-color' content= themeColor || '#86b300')
-		meta(name='theme-color-orig' content= themeColor || '#86b300')
-		meta(property='og:site_name' content= instanceName || 'Misskey')
-		meta(property='instance_url' content= instanceUrl)
-		meta(name='viewport' content='width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover')
-		meta(name='format-detection' content='telephone=no,date=no,address=no,email=no,url=no')
-		link(rel='icon' href= icon || '/favicon.ico')
-		link(rel='apple-touch-icon' href= appleTouchIcon || '/apple-touch-icon.png')
-		link(rel='manifest' href='/manifest.json')
-		link(rel='search' type='application/opensearchdescription+xml' title=(title || "Misskey") href=`${baseUrl}/opensearch.xml`)
-		link(rel='prefetch' href=serverErrorImageUrl)
-		link(rel='prefetch' href=infoImageUrl)
-		link(rel='prefetch' href=notFoundImageUrl)
-
-		if !config.frontendManifestExists
-				script(type="module" src="/vite/@vite/client")
-
-		if Array.isArray(entry.css)
-			each href in entry.css
-				link(rel='stylesheet' href=`/vite/${href}`)
-
-		title
-			block title
-				= title || 'Misskey'
-
-		if noindex
-			meta(name='robots' content='noindex')
-
-		block desc
-			meta(name='description' content= desc || '✨🌎✨ A interplanetary communication platform ✨🚀✨')
-
-		block meta
-
-		block og
-			meta(property='og:title'       content= title || 'Misskey')
-			meta(property='og:description' content= desc || '✨🌎✨ A interplanetary communication platform ✨🚀✨')
-			meta(property='og:image'       content= img)
-			meta(property='twitter:card'   content='summary')
-
-		style
-			include ../style.css
-
-		script.
-			var VERSION = "#{version}";
-			var CLIENT_ENTRY = !{JSON.stringify(entry.file)};
-
-		script(type='application/json' id='misskey_meta' data-generated-at=now)
-			!= metaJson
-
-		script(type='application/json' id='misskey_clientCtx' data-generated-at=now)
-			!= clientCtx
-
-		script
-			include ../boot.js
-
-	body
-		noscript: p
-			| JavaScriptを有効にしてください
-			br
-			| Please turn on your JavaScript
-		div#splash
-			img#splashIcon(src= icon || '/static-assets/splash.png')
-			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)">
-						<circle cx="64" cy="64" r="64" style="fill:none;stroke:currentColor;stroke-width:24px;"/>
-					</g>
-				</svg>
-				<svg class="spinner fg" viewBox="0 0 152 152" xmlns="http://www.w3.org/2000/svg">
-					<g transform="matrix(1,0,0,1,12,12)">
-						<path d="M128,64C128,28.654 99.346,0 64,0C99.346,0 128,28.654 128,64Z" style="fill:none;stroke:currentColor;stroke-width:24px;"/>
-					</g>
-				</svg>
-		block content

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

@@ -0,0 +1,108 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and misskey-project
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import { comment, defaultDescription } from '@/server/web/views/_.js';
+import { Splash } from '@/server/web/views/_splash.js';
+import type { CommonProps } from '@/server/web/views/_.js';
+import type { PropsWithChildren, Children } from '@kitajs/html';
+
+export function Layout(props: PropsWithChildren<CommonProps<{
+	title?: string;
+	noindex?: boolean;
+	desc?: string;
+	img?: string;
+	serverErrorImageUrl?: string;
+	infoImageUrl?: string;
+	notFoundImageUrl?: string;
+	metaJson?: string;
+	clientCtxJson?: string;
+
+	titleSlot?: Children;
+	descSlot?: Children;
+	metaSlot?: Children;
+	ogSlot?: Children;
+}>>) {
+	const now = Date.now();
+
+	// 変数名をsafeで始めることでエラーをスキップ
+	const safeMetaJson = props.metaJson;
+	const safeClientCtxJson = props.clientCtxJson;
+
+	return (
+		<>
+			{'<!DOCTYPE html>'}
+			{comment}
+			<html>
+				<head>
+					<meta charset="UTF-8" />
+					<meta name="application-name" content="Misskey" />
+					<meta name="referer" content="origin" />
+					<meta name="theme-color" content={props.themeColor ?? '#86b300'} />
+					<meta name="theme-color-orig" content={props.themeColor ?? '#86b300'} />
+					<meta property="og:site_name" content={props.instanceName || 'Misskey'} />
+					<meta property="instance_url" content={props.instanceUrl} />
+					<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover" />
+					<meta name="format-detection" content="telephone=no,date=no,address=no,email=no,url=no" />
+					<link rel="icon" href={props.icon || '/favicon.ico'} />
+					<link rel="apple-touch-icon" href={props.appleTouchIcon || '/apple-touch-icon.png'} />
+					<link rel="manifest" href="/manifest.json" />
+					<link rel="search" type="application/opensearchdescription+xml" title={props.title || 'Misskey'} href={`${props.config.url}/opensearch.xml`} />
+					{props.serverErrorImageUrl != null ? <link rel="prefetch" as="image" href={props.serverErrorImageUrl} /> : null}
+					{props.infoImageUrl != null ? <link rel="prefetch" as="image" href={props.infoImageUrl} /> : null}
+					{props.notFoundImageUrl != null ? <link rel="prefetch" as="image" href={props.notFoundImageUrl} /> : null}
+
+					{!props.config.frontendManifestExists ? <script type="module" src="/vite/@vite/client"></script> : null}
+
+					{props.config.frontendEntry.css != null ? props.config.frontendEntry.css.map((href) => (
+						<link rel="stylesheet" href={`/vite/${href}`} />
+					)) : null}
+
+					{props.titleSlot ?? <title safe>{props.title || 'Misskey'}</title>}
+
+					{props.noindex ? <meta name="robots" content="noindex" /> : null}
+
+					{props.descSlot ?? (props.desc != null ? <meta name="description" content={props.desc || defaultDescription} /> : null)}
+
+					{props.metaSlot}
+
+					{props.ogSlot ?? (
+						<>
+							<meta property="og:title" content={props.title || 'Misskey'} />
+							<meta property="og:description" content={props.desc || defaultDescription} />
+							{props.img != null ? <meta property="og:image" content={props.img} /> : null}
+							<meta property="twitter:card" content="summary" />
+						</>
+					)}
+
+					{props.frontendBootloaderCss != null ? <style safe>{props.frontendBootloaderCss}</style> : <link rel="stylesheet" href="/vite/loader/style.css" />}
+
+					<script>
+						const VERSION = '{props.version}';
+						const CLIENT_ENTRY = {JSON.stringify(props.config.frontendEntry.file)};
+						const LANGS = {JSON.stringify(props.langs)};
+					</script>
+
+					{safeMetaJson != null ? <script type="application/json" id="misskey_meta" data-generated-at={now}>{safeMetaJson}</script> : null}
+					{safeClientCtxJson != null ? <script type="application/json" id="misskey_clientCtx" data-generated-at={now}>{safeClientCtxJson}</script> : null}
+
+					{props.frontendBootloaderJs != null ? <script>{props.frontendBootloaderJs}</script> : <script src="/vite/loader/boot.js"></script>}
+				</head>
+				<body>
+					<noscript>
+						<p>
+							JavaScriptを有効にしてください<br />
+							Please turn on your JavaScript
+						</p>
+					</noscript>
+					<Splash icon={props.icon} />
+					{props.children}
+				</body>
+			</html>
+		</>
+	);
+}
+
+export { Layout as BasePage };
+

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

@@ -1,20 +0,0 @@
-doctype html
-
-html
-
-	head
-		meta(charset='utf-8')
-		meta(name='application-name' content='Misskey')
-		title Misskey Repair Tool
-		style
-			include ../bios.css
-		script
-			include ../bios.js
-
-	body
-		header
-			h1 Misskey Repair Tool #{version}
-		main
-			div.tabs
-				button#ls edit local storage
-			div#content

packages/backend/src/server/web/views/bios.tsx

@@ -0,0 +1,35 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and misskey-project
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+export function BiosPage(props: {
+	version: string;
+}) {
+	return (
+		<>
+			{'<!DOCTYPE html>'}
+			<html>
+				<head>
+					<meta charset="UTF-8" />
+					<meta name="application-name" content="Misskey" />
+					<title>Misskey Repair Tool</title>
+					<link rel="stylesheet" href="/static-assets/misc/bios.css" />
+				</head>
+
+				<body>
+					<header>
+						<h1 safe>Misskey Repair Tool {props.version}</h1>
+					</header>
+					<main>
+						<div class="tabs">
+							<button id="ls">edit local storage</button>
+						</div>
+						<div id="content"></div>
+					</main>
+					<script src="/static-assets/misc/bios.js"></script>
+				</body>
+			</html>
+		</>
+	);
+}

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

@@ -1,19 +0,0 @@
-extends ./base
-
-block vars
-	- const title = channel.name;
-	- const url = `${config.url}/channels/${channel.id}`;
-
-block title
-	= `${title} | ${instanceName}`
-
-block desc
-	meta(name='description' content= channel.description)
-
-block og
-	meta(property='og:type'        content='article')
-	meta(property='og:title'       content= title)
-	meta(property='og:description' content= channel.description)
-	meta(property='og:url'         content= url)
-	meta(property='og:image'       content= channel.bannerUrl)
-	meta(property='twitter:card'   content='summary')

packages/backend/src/server/web/views/channel.tsx

@@ -0,0 +1,40 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and misskey-project
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import type { Packed } from '@/misc/json-schema.js';
+import type { CommonProps } from '@/server/web/views/_.js';
+import { Layout } from '@/server/web/views/base.js';
+
+export function ChannelPage(props: CommonProps<{
+	channel: Packed<'Channel'>;
+}>) {
+
+	function ogBlock() {
+		return (
+			<>
+				<meta property="og:type" content="website" />
+				<meta property="og:title" content={props.channel.name} />
+				{props.channel.description != null ? <meta property="og:description" content={props.channel.description} /> : null}
+				<meta property="og:url" content={`${props.config.url}/channels/${props.channel.id}`} />
+				{props.channel.bannerUrl ? (
+					<>
+						<meta property="og:image" content={props.channel.bannerUrl} />
+						<meta property="twitter:card" content="summary" />
+					</>
+				) : null}
+			</>
+		);
+	}
+
+	return (
+		<Layout
+			{...props}
+			title={`${props.channel.name} | ${props.instanceName}`}
+			desc={props.channel.description ?? undefined}
+			ogSlot={ogBlock()}
+		>
+		</Layout>
+	);
+}

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

@@ -1,21 +0,0 @@
-doctype html
-
-html
-
-	head
-		meta(charset='utf-8')
-		meta(name='application-name' content='Misskey')
-		title Misskey Cli
-		style
-			include ../cli.css
-		script
-			include ../cli.js
-
-	body
-		header
-			h1 Misskey Cli #{version}
-		main
-			div#form
-				textarea#text
-				button#submit submit
-			div#tl

packages/backend/src/server/web/views/cli.tsx

@@ -0,0 +1,37 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and misskey-project
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+export function CliPage(props: {
+	version: string;
+}) {
+	return (
+		<>
+			{'<!DOCTYPE html>'}
+			<html>
+				<head>
+					<meta charset="UTF-8" />
+					<meta name="application-name" content="Misskey" />
+					<title>Misskey CLI Tool</title>
+
+					<link rel="stylesheet" href="/static-assets/misc/cli.css" />
+				</head>
+
+				<body>
+					<header>
+						<h1 safe>Misskey CLI {props.version}</h1>
+					</header>
+					<main>
+						<div id="form">
+							<textarea id="text"></textarea>
+							<button id="submit">Submit</button>
+						</div>
+						<div id="tl"></div>
+					</main>
+					<script src="/static-assets/misc/cli.js"></script>
+				</body>
+			</html>
+		</>
+	);
+}

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

@@ -1,35 +0,0 @@
-extends ./base
-
-block vars
-	- const user = clip.user;
-	- const title = clip.name;
-	- const url = `${config.url}/clips/${clip.id}`;
-
-block title
-	= `${title} | ${instanceName}`
-
-block desc
-	meta(name='description' content= clip.description)
-
-block og
-	meta(property='og:type'        content='article')
-	meta(property='og:title'       content= title)
-	meta(property='og:description' content= clip.description)
-	meta(property='og:url'         content= url)
-	meta(property='og:image'       content= avatarUrl)
-	meta(property='twitter:card'   content='summary')
-
-block meta
-	if profile.noCrawle
-		meta(name='robots' content='noindex')
-	if profile.preventAiLearning
-		meta(name='robots' content='noimageai')
-		meta(name='robots' content='noai')
-
-	meta(name='misskey:user-username' content=user.username)
-	meta(name='misskey:user-id' content=user.id)
-	meta(name='misskey:clip-id' content=clip.id)
-
-	// todo
-	if user.twitter
-		meta(name='twitter:creator' content=`@${user.twitter.screenName}`)

packages/backend/src/server/web/views/clip.tsx

@@ -0,0 +1,59 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and misskey-project
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import type { Packed } from '@/misc/json-schema.js';
+import type { MiUserProfile } from '@/models/UserProfile.js';
+import type { CommonProps } from '@/server/web/views/_.js';
+import { Layout } from '@/server/web/views/base.js';
+
+export function ClipPage(props: CommonProps<{
+	clip: Packed<'Clip'>;
+	profile: MiUserProfile;
+}>) {
+	function ogBlock() {
+		return (
+			<>
+				<meta property="og:type" content="article" />
+				<meta property="og:title" content={props.clip.name} />
+				{props.clip.description != null ? <meta property="og:description" content={props.clip.description} /> : null}
+				<meta property="og:url" content={`${props.config.url}/clips/${props.clip.id}`} />
+				{props.clip.user.avatarUrl ? (
+					<>
+						<meta property="og:image" content={props.clip.user.avatarUrl} />
+						<meta property="twitter:card" content="summary" />
+					</>
+				) : null}
+			</>
+		);
+	}
+
+	function metaBlock() {
+		return (
+			<>
+				{props.profile.noCrawle ? <meta name="robots" content="noindex" /> : null}
+				{props.profile.preventAiLearning ? (
+					<>
+						<meta name="robots" content="noimageai" />
+						<meta name="robots" content="noai" />
+					</>
+				) : null}
+				<meta name="misskey:user-username" content={props.clip.user.username} />
+				<meta name="misskey:user-id" content={props.clip.user.id} />
+				<meta name="misskey:clip-id" content={props.clip.id} />
+			</>
+		);
+	}
+
+	return (
+		<Layout
+			{...props}
+			title={`${props.clip.name} | ${props.instanceName}`}
+			desc={props.clip.description ?? ''}
+			metaSlot={metaBlock()}
+			ogSlot={ogBlock()}
+		>
+		</Layout>
+	);
+}

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

@@ -1,71 +0,0 @@
-doctype html
-
-//
-	-
-	  _____ _         _
-	 |     |_|___ ___| |_ ___ _ _
-	 | | | | |_ -|_ -| '_| -_| | |
-	 |_|_|_|_|___|___|_,_|___|_  |
-	                         |___|
-	 Thank you for using Misskey!
-	 If you are reading this message... how about joining the development?
-	 https://github.com/misskey-dev/misskey
-
-
-html
-
-	head
-		meta(charset='utf-8')
-		meta(name='viewport' content='width=device-width, initial-scale=1')
-		meta(name='application-name' content='Misskey')
-		meta(name='referrer' content='origin')
-
-		title
-			block title
-				= 'An error has occurred... | Misskey'
-
-		style
-			include ../error.css
-
-		script
-			include ../error.js
-
-body
-	svg.icon-warning(xmlns="http://www.w3.org/2000/svg", viewBox="0 0 24 24", stroke-width="2", stroke="currentColor", fill="none", stroke-linecap="round", stroke-linejoin="round")
-		path(stroke="none", d="M0 0h24v24H0z", fill="none")
-		path(d="M12 9v2m0 4v.01")
-		path(d="M5 19h14a2 2 0 0 0 1.84 -2.75l-7.1 -12.25a2 2 0 0 0 -3.5 0l-7.1 12.25a2 2 0 0 0 1.75 2.75")
-
-	h1(data-i18n="title") Failed to initialize Misskey
-
-	button.button-big(onclick="location.reload();")
-		span.button-label-big(data-i18n-reload) Reload
-
-	p(data-i18n="serverError") If reloading after a period of time does not resolve the problem, contact the server administrator with the following ERROR ID.
-
-	div#errors
-		code.
-			ERROR CODE: #{code}
-			ERROR ID: #{id}
-
-	p
-		b(data-i18n="solution") The following actions may solve the problem.
-
-	p(data-i18n="solution1") Update your os and browser
-	p(data-i18n="solution2") Disable an adblocker
-	p(data-i18n="solution3") Clear your browser cache
-	p(data-i18n="solution4") (Tor Browser) Set dom.webaudio.enabled to true
-
-	details(style="color: #86b300;")
-		summary(data-i18n="otherOption") Other options
-		a(href="/flush")
-			button.button-small
-				span.button-label-small(data-i18n="otherOption1") Clear preferences and cache
-		br
-		a(href="/cli")
-			button.button-small
-				span.button-label-small(data-i18n="otherOption2") Start the simple client
-		br
-		a(href="/bios")
-			button.button-small
-				span.button-label-small(data-i18n="otherOption3") Start the repair tool

packages/backend/src/server/web/views/error.tsx

@@ -0,0 +1,89 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and misskey-project
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import { comment } from '@/server/web/views/_.js';
+import type { CommonPropsMinimum } from '@/server/web/views/_.js';
+
+export function ErrorPage(props: {
+	title?: string;
+	code: string;
+	id: string;
+}) {
+	return (
+		<>
+			{'<!DOCTYPE html>'}
+			{comment}
+			<html>
+				<head>
+					<meta charset="UTF-8" />
+					<meta name="application-name" content="Misskey" />
+					<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+					<meta name="referrer" content="origin" />
+					<title safe>{props.title ?? 'An error has occurred... | Misskey'}</title>
+					<link rel="stylesheet" href="/static-assets/misc/error.css" />
+					<script src="/static-assets/misc/error.js"></script>
+				</head>
+				<body>
+					<svg
+						class="icon-warning"
+						xmlns="http://www.w3.org/2000/svg"
+						viewBox="0 0 24 24"
+						stroke-width="2"
+						stroke="currentColor"
+						fill="none"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+					>
+						<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+						<path d="M12 9v2m0 4v.01" />
+						<path d="M5 19h14a2 2 0 0 0 1.84 -2.75l-7.1 -12.25a2 2 0 0 0 -3.5 0l-7.1 12.25a2 2 0 0 0 1.75 2.75" />
+					</svg>
+					<h1 data-i18n="title">Failed to initialize Misskey</h1>
+
+					<button class="button-big" onclick="location.reload();">
+						<span class="button-label-big" data-i18n="reload">Reload</span>
+					</button>
+
+					<p data-i18n="serverError">
+						If reloading after a period of time does not resolve the problem, contact the server administrator with the following ERROR ID.
+					</p>
+
+					<div id="errors">
+						<code safe>
+							ERROR CODE: {props.code}<br />
+							ERROR ID: {props.id}
+						</code>
+					</div>
+
+					<p><b data-i18n="solution">The following actions may solve the problem.</b></p>
+
+					<p data-i18n="solution1">Update your os and browser</p>
+					<p data-i18n="solution2">Disable an adblocker</p>
+					<p data-i18n="solution3">Clear your browser cache</p>
+					<p data-i18n="solution4">(Tor Browser) Set dom.webaudio.enabled to true</p>
+
+					<details style="color: #86b300;">
+						<summary data-i18n="otherOption">Other options</summary>
+						<a href="/flush">
+							<button class="button-small">
+								<span class="button-label-small" data-i18n="otherOption1">Clear preferences and cache</span>
+							</button>
+						</a>
+						<a href="/cli">
+							<button class="button-small">
+								<span class="button-label-small" data-i18n="otherOption2">Start the simple client</span>
+							</button>
+						</a>
+						<a href="/bios">
+							<button class="button-small">
+								<span class="button-label-small" data-i18n="otherOption3">Start the repair tool</span>
+							</button>
+						</a>
+					</details>
+				</body>
+			</html>
+		</>
+	);
+}

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

@@ -1,35 +0,0 @@
-extends ./base
-
-block vars
-	- const user = flash.user;
-	- const title = flash.title;
-	- const url = `${config.url}/play/${flash.id}`;
-
-block title
-	= `${title} | ${instanceName}`
-
-block desc
-	meta(name='description' content= flash.summary)
-
-block og
-	meta(property='og:type'        content='article')
-	meta(property='og:title'       content= title)
-	meta(property='og:description' content= flash.summary)
-	meta(property='og:url'         content= url)
-	meta(property='og:image'       content= avatarUrl)
-	meta(property='twitter:card'   content='summary')
-
-block meta
-	if profile.noCrawle
-		meta(name='robots' content='noindex')
-	if profile.preventAiLearning
-		meta(name='robots' content='noimageai')
-		meta(name='robots' content='noai')
-
-	meta(name='misskey:user-username' content=user.username)
-	meta(name='misskey:user-id' content=user.id)
-	meta(name='misskey:flash-id' content=flash.id)
-
-	// todo
-	if user.twitter
-		meta(name='twitter:creator' content=`@${user.twitter.screenName}`)

packages/backend/src/server/web/views/flash.tsx

@@ -0,0 +1,59 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and misskey-project
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import type { Packed } from '@/misc/json-schema.js';
+import type { MiUserProfile } from '@/models/UserProfile.js';
+import type { CommonProps } from '@/server/web/views/_.js';
+import { Layout } from '@/server/web/views/base.js';
+
+export function FlashPage(props: CommonProps<{
+	flash: Packed<'Flash'>;
+	profile: MiUserProfile;
+}>) {
+	function ogBlock() {
+		return (
+			<>
+				<meta property="og:type" content="article" />
+				<meta property="og:title" content={props.flash.title} />
+				<meta property="og:description" content={props.flash.summary} />
+				<meta property="og:url" content={`${props.config.url}/play/${props.flash.id}`} />
+				{props.flash.user.avatarUrl ? (
+					<>
+						<meta property="og:image" content={props.flash.user.avatarUrl} />
+						<meta property="twitter:card" content="summary" />
+					</>
+				) : null}
+			</>
+		);
+	}
+
+	function metaBlock() {
+		return (
+			<>
+				{props.profile.noCrawle ? <meta name="robots" content="noindex" /> : null}
+				{props.profile.preventAiLearning ? (
+					<>
+						<meta name="robots" content="noimageai" />
+						<meta name="robots" content="noai" />
+					</>
+				) : null}
+				<meta name="misskey:user-username" content={props.flash.user.username} />
+				<meta name="misskey:user-id" content={props.flash.user.id} />
+				<meta name="misskey:flash-id" content={props.flash.id} />
+			</>
+		);
+	}
+
+	return (
+		<Layout
+			{...props}
+			title={`${props.flash.title} | ${props.instanceName}`}
+			desc={props.flash.summary}
+			metaSlot={metaBlock()}
+			ogSlot={ogBlock()}
+		>
+		</Layout>
+	);
+}

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

@@ -1,51 +0,0 @@
-doctype html
-
-html
-	#msg
-	script.
-		const msg = document.getElementById('msg');
-		const successText = `\nSuccess Flush! <a href="/">Back to Misskey</a>\n成功しました。<a href="/">Misskeyを開き直してください。</a>`;
-
-		if (!document.cookie) {
-			message('Your site data is fully cleared by your browser.');
-			message(successText);
-		} else {
-			message('Your browser does not support Clear-Site-Data header. Start opportunistic flushing.');
-			(async function() {
-				try {
-					localStorage.clear();
-					message('localStorage cleared.');
-
-					const idbPromises = ['MisskeyClient', 'keyval-store'].map((name, i, arr) => new Promise((res, rej) => {
-						const delidb = indexedDB.deleteDatabase(name);
-						delidb.onsuccess = () => res(message(`indexedDB "${name}" cleared. (${i + 1}/${arr.length})`));
-						delidb.onerror = e => rej(e)
-					}));
-
-					await Promise.all(idbPromises);
-
-					if (navigator.serviceWorker.controller) {
-						navigator.serviceWorker.controller.postMessage('clear');
-						await navigator.serviceWorker.getRegistrations()
-							.then(registrations => {
-								return Promise.all(registrations.map(registration => registration.unregister()));
-							})
-							.catch(e => { throw new Error(e) });
-					}
-
-					message(successText);
-				} catch (e) {
-					message(`\n${e}\n\nFlush Failed. <a href="/flush">Please retry.</a>\n失敗しました。<a href="/flush">もう一度試してみてください。</a>`);
-					message(`\nIf you retry more than 3 times, try manually clearing the browser cache or contact to instance admin.\n3回以上試しても失敗する場合、ブラウザのキャッシュを手動で消去し、それでもだめならインスタンス管理者に連絡してみてください。\n`)
-
-					console.error(e);
-					setTimeout(() => {
-						location = '/';
-					}, 10000)
-				}
-			})();
-		}
-
-		function message(text) {
-			msg.insertAdjacentHTML('beforeend', `<p>[${(new Date()).toString()}] ${text.replace(/\n/g,'<br>')}</p>`)
-		}

packages/backend/src/server/web/views/flush.tsx

@@ -0,0 +1,23 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and misskey-project
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+export function FlushPage(props?: {}) {
+	return (
+		<>
+			{'<!DOCTYPE html>'}
+			<html>
+				<head>
+					<meta charset="UTF-8" />
+					<meta name="application-name" content="Misskey" />
+					<title>Clear preferences and cache</title>
+				</head>
+				<body>
+					<div id="msg"></div>
+					<script src="/static-assets/misc/flush.js"></script>
+				</body>
+			</html>
+		</>
+	);
+}

packages/backend/src/server/web/views/gallery-post.pug

@@ -1,41 +0,0 @@
-extends ./base
-
-block vars
-	- const user = post.user;
-	- const title = post.title;
-	- const url = `${config.url}/gallery/${post.id}`;
-
-block title
-	= `${title} | ${instanceName}`
-
-block desc
-	meta(name='description' content= post.description)
-
-block og
-	meta(property='og:type'        content='article')
-	meta(property='og:title'       content= title)
-	meta(property='og:description' content= post.description)
-	meta(property='og:url'         content= url)
-	if post.isSensitive
-		meta(property='og:image'     content= avatarUrl)
-		meta(property='twitter:card' content='summary')
-	else
-		meta(property='og:image'       content= post.files[0].thumbnailUrl)
-		meta(property='twitter:card'   content='summary_large_image')
-
-block meta
-	if user.host || profile.noCrawle
-		meta(name='robots' content='noindex')
-	if profile.preventAiLearning
-		meta(name='robots' content='noimageai')
-		meta(name='robots' content='noai')
-
-	meta(name='misskey:user-username' content=user.username)
-	meta(name='misskey:user-id' content=user.id)
-
-	// todo
-	if user.twitter
-		meta(name='twitter:creator' content=`@${user.twitter.screenName}`)
-
-	if !user.host
-		link(rel='alternate' href=url type='application/activity+json')

packages/backend/src/server/web/views/gallery-post.tsx

@@ -0,0 +1,65 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and misskey-project
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import type { Packed } from '@/misc/json-schema.js';
+import type { MiUserProfile } from '@/models/UserProfile.js';
+import type { CommonProps } from '@/server/web/views/_.js';
+import { Layout } from '@/server/web/views/base.js';
+
+export function GalleryPostPage(props: CommonProps<{
+	galleryPost: Packed<'GalleryPost'>;
+	profile: MiUserProfile;
+}>) {
+	function ogBlock() {
+		return (
+			<>
+				<meta property="og:type" content="article" />
+				<meta property="og:title" content={props.galleryPost.title} />
+				{props.galleryPost.description != null ? <meta property="og:description" content={props.galleryPost.description} /> : null}
+				<meta property="og:url" content={`${props.config.url}/gallery/${props.galleryPost.id}`} />
+				{props.galleryPost.isSensitive && props.galleryPost.user.avatarUrl ? (
+					<>
+						<meta property="og:image" content={props.galleryPost.user.avatarUrl} />
+						<meta property="twitter:card" content="summary" />
+					</>
+				) : null}
+				{!props.galleryPost.isSensitive && props.galleryPost.files != null ? (
+					<>
+						<meta property="og:image" content={props.galleryPost.files[0]!.thumbnailUrl ?? props.galleryPost.files[0]!.url} />
+						<meta property="twitter:card" content="summary_large_image" />
+					</>
+				) : null}
+			</>
+		);
+	}
+
+	function metaBlock() {
+		return (
+			<>
+				{props.profile.noCrawle ? <meta name="robots" content="noindex" /> : null}
+				{props.profile.preventAiLearning ? (
+					<>
+						<meta name="robots" content="noimageai" />
+						<meta name="robots" content="noai" />
+					</>
+				) : null}
+				<meta name="misskey:user-username" content={props.galleryPost.user.username} />
+				<meta name="misskey:user-id" content={props.galleryPost.user.id} />
+				<meta name="misskey:gallery-post-id" content={props.galleryPost.id} />
+			</>
+		);
+	}
+
+	return (
+		<Layout
+			{...props}
+			title={`${props.galleryPost.title} | ${props.instanceName}`}
+			desc={props.galleryPost.description ?? ''}
+			metaSlot={metaBlock()}
+			ogSlot={ogBlock()}
+		>
+		</Layout>
+	);
+}

packages/backend/src/server/web/views/info-card.pug

@@ -1,50 +0,0 @@
-doctype html
-
-html
-
-	head
-		meta(charset='utf-8')
-		meta(name='application-name' content='Misskey')
-		title= meta.name || host
-		style.
-			html, body {
-				margin: 0;
-				padding: 0;
-				min-height: 100vh;
-				background: #fff;
-			}
-
-			#a {
-				display: block;
-			}
-
-			#banner {
-				background-size: cover;
-				background-position: center center;
-			}
-
-			#title {
-				display: inline-block;
-				margin: 24px;
-				padding: 0.5em 0.8em;
-				color: #fff;
-				background: rgba(0, 0, 0, 0.5);
-				font-weight: bold;
-				font-size: 1.3em;
-			}
-
-			#content {
-				overflow: auto;
-				color: #353c3e;
-			}
-
-			#description {
-				margin: 24px;
-			}
-
-	body
-		a#a(href=`https://${host}` target="_blank")
-			header#banner(style=`background-image: url(${meta.bannerUrl})`)
-				div#title= meta.name || host
-		div#content
-			div#description!= meta.description

packages/backend/src/server/web/views/info-card.tsx

@@ -0,0 +1,40 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and misskey-project
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import { comment, CommonPropsMinimum } from '@/server/web/views/_.js';
+import type { MiMeta } from '@/models/Meta.js';
+
+export function InfoCardPage(props: CommonPropsMinimum<{
+	meta: MiMeta;
+}>) {
+	// 変数名をsafeで始めることでエラーをスキップ
+	const safeDescription = props.meta.description;
+
+	return (
+		<>
+			{'<!DOCTYPE html>'}
+			{comment}
+			<html>
+				<head>
+					<meta charset="UTF-8" />
+					<meta name="application-name" content="Misskey" />
+					<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+					<title safe>{props.meta.name ?? props.config.url}</title>
+					<link rel="stylesheet" href="/static-assets/misc/info-card.css" />
+				</head>
+				<body>
+					<a id="a" href={props.config.url} target="_blank" rel="noopener noreferrer">
+						<header id="banner" style={props.meta.bannerUrl != null ? `background-image: url(${props.meta.bannerUrl});` : ''}>
+							<div id="title" safe>{props.meta.name ?? props.config.url}</div>
+						</header>
+					</a>
+					<div id="content">
+						<div id="description">{safeDescription}</div>
+					</div>
+				</body>
+			</html>
+		</>
+	);
+}

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

@@ -1,62 +0,0 @@
-extends ./base
-
-block vars
-	- const user = note.user;
-	- const title = user.name ? `${user.name} (@${user.username}${user.host ? `@${user.host}` : ''})` : `@${user.username}${user.host ? `@${user.host}` : ''}`;
-	- const url = `${config.url}/notes/${note.id}`;
-	- const isRenote = note.renote && note.text == null && note.fileIds.length == 0 && note.poll == null;
-	- const images = (note.files || []).filter(file => file.type.startsWith('image/') && !file.isSensitive)
-	- const videos = (note.files || []).filter(file => file.type.startsWith('video/') && !file.isSensitive)
-
-block title
-	= `${title} | ${instanceName}`
-
-block desc
-	meta(name='description' content= summary)
-
-block og
-	meta(property='og:type'        content='article')
-	meta(property='og:title'       content= title)
-	meta(property='og:description' content= summary)
-	meta(property='og:url'         content= url)
-	if videos.length
-		each video in videos
-			meta(property='og:video:url'        content= video.url)
-			meta(property='og:video:secure_url' content= video.url)
-			meta(property='og:video:type'       content= video.type)
-			// FIXME: add width and height
-			// FIXME: add embed player for Twitter
-	if images.length
-		meta(property='twitter:card' content='summary_large_image')
-		each image in images
-			meta(property='og:image'     content= image.url)
-	else
-		meta(property='twitter:card' content='summary')
-		meta(property='og:image'     content= avatarUrl)
-
-
-block meta
-	if user.host || isRenote || profile.noCrawle
-		meta(name='robots' content='noindex')
-	if profile.preventAiLearning
-		meta(name='robots' content='noimageai')
-		meta(name='robots' content='noai')
-
-	meta(name='misskey:user-username' content=user.username)
-	meta(name='misskey:user-id' content=user.id)
-	meta(name='misskey:note-id' content=note.id)
-
-	// todo
-	if user.twitter
-		meta(name='twitter:creator' content=`@${user.twitter.screenName}`)
-
-	if note.prev
-		link(rel='prev' href=`${config.url}/notes/${note.prev}`)
-	if note.next
-		link(rel='next' href=`${config.url}/notes/${note.next}`)
-
-	if federationEnabled
-		if !user.host
-			link(rel='alternate' href=url type='application/activity+json')
-		if note.uri
-			link(rel='alternate' href=note.uri type='application/activity+json')

packages/backend/src/server/web/views/note.tsx

@@ -0,0 +1,94 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and misskey-project
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import type { Packed } from '@/misc/json-schema.js';
+import type { MiUserProfile } from '@/models/UserProfile.js';
+import type { CommonProps } from '@/server/web/views/_.js';
+import { Layout } from '@/server/web/views/base.js';
+import { isRenotePacked } from '@/misc/is-renote.js';
+import { getNoteSummary } from '@/misc/get-note-summary.js';
+
+export function NotePage(props: CommonProps<{
+	note: Packed<'Note'>;
+	profile: MiUserProfile;
+}>) {
+	const title = props.note.user.name ? `${props.note.user.name} (@${props.note.user.username}${props.note.user.host ? `@${props.note.user.host}` : ''})` : `@${props.note.user.username}${props.note.user.host ? `@${props.note.user.host}` : ''}`
+	const isRenote = isRenotePacked(props.note);
+	const images = (props.note.files ?? []).filter(f => f.type.startsWith('image/'));
+	const videos = (props.note.files ?? []).filter(f => f.type.startsWith('video/'));
+	const summary = getNoteSummary(props.note);
+
+	function ogBlock() {
+		return (
+			<>
+				<meta property="og:type" content="article" />
+				<meta property="og:title" content={title} />
+				<meta property="og:description" content={summary} />
+				<meta property="og:url" content={`${props.config.url}/notes/${props.note.id}`} />
+				{videos.map(video => (
+					<>
+						<meta property="og:video:url" content={video.url} />
+						<meta property="og:video:secure_url" content={video.url} />
+						<meta property="og:video:type" content={video.type} />
+						{video.thumbnailUrl ? <meta property="og:video:image" content={video.thumbnailUrl} /> : null}
+						{video.properties.width != null ? <meta property="og:video:width" content={video.properties.width.toString()} /> : null}
+						{video.properties.height != null ? <meta property="og:video:height" content={video.properties.height.toString()} /> : null}
+					</>
+				))}
+				{images.length > 0 ? (
+					<>
+						<meta property="twitter:card" content="summary_large_image" />
+						{images.map(image => (
+							<>
+								<meta property="og:image" content={image.url} />
+								{image.properties.width != null ? <meta property="og:image:width" content={image.properties.width.toString()} /> : null}
+								{image.properties.height != null ? <meta property="og:image:height" content={image.properties.height.toString()} /> : null}
+							</>
+						))}
+					</>
+				) : (
+					<>
+						<meta property="twitter:card" content="summary" />
+						<meta property="og:image" content={props.note.user.avatarUrl} />
+					</>
+				)}
+			</>
+		);
+	}
+
+	function metaBlock() {
+		return (
+			<>
+				{props.note.user.host != null || isRenote || props.profile.noCrawle ? <meta name="robots" content="noindex" /> : null}
+				{props.profile.preventAiLearning ? (
+					<>
+						<meta name="robots" content="noimageai" />
+						<meta name="robots" content="noai" />
+					</>
+				) : null}
+				<meta name="misskey:user-username" content={props.note.user.username} />
+				<meta name="misskey:user-id" content={props.note.user.id} />
+				<meta name="misskey:note-id" content={props.note.id} />
+
+				{props.federationEnabled ? (
+					<>
+						{props.note.user.host == null ? <link rel="alternate" type="application/activity+json" href={`${props.config.url}/notes/${props.note.id}`} /> : null}
+						{props.note.uri != null ? <link rel="alternate" type="application/activity+json" href={props.note.uri} /> : null}
+					</>
+				) : null}
+			</>
+		);
+	}
+
+	return (
+		<Layout
+			{...props}
+			title={`${title} | ${props.instanceName}`}
+			desc={summary}
+			metaSlot={metaBlock()}
+			ogSlot={ogBlock()}
+		></Layout>
+	)
+}

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

@@ -1,11 +0,0 @@
-extends ./base
-
-block meta
-	//- Should be removed by the page when it loads, so that it won't needlessly
-	//- stay when user navigates away via the navigation bar
-	//- XXX: Remove navigation bar in auth page?
-	meta(name='misskey:oauth:transaction-id' content=transactionId)
-	meta(name='misskey:oauth:client-name' content=clientName)
-	if clientLogo
-		meta(name='misskey:oauth:client-logo' content=clientLogo)
-	meta(name='misskey:oauth:scope' content=scope)

packages/backend/src/server/web/views/oauth.tsx

@@ -0,0 +1,37 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and misskey-project
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import type { CommonProps } from '@/server/web/views/_.js';
+import { Layout } from '@/server/web/views/base.js';
+
+export function OAuthPage(props: CommonProps<{
+	transactionId: string;
+	clientName: string;
+	clientLogo?: string;
+	scope: string[];
+}>) {
+
+	//- Should be removed by the page when it loads, so that it won't needlessly
+	//- stay when user navigates away via the navigation bar
+	//- XXX: Remove navigation bar in auth page?
+	function metaBlock() {
+		return (
+			<>
+				<meta name="misskey:oauth:transaction-id" content={props.transactionId} />
+				<meta name="misskey:oauth:client-name" content={props.clientName} />
+				{props.clientLogo ? <meta name="misskey:oauth:client-logo" content={props.clientLogo} /> : null}
+				<meta name="misskey:oauth:scope" content={props.scope.join(' ')} />
+			</>
+		);
+	}
+
+	return (
+		<Layout
+			{...props}
+			metaSlot={metaBlock()}
+		>
+		</Layout>
+	);
+}

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

@@ -1,35 +0,0 @@
-extends ./base
-
-block vars
-	- const user = page.user;
-	- const title = page.title;
-	- const url = `${config.url}/@${user.username}/pages/${page.name}`;
-
-block title
-	= `${title} | ${instanceName}`
-
-block desc
-	meta(name='description' content= page.summary)
-
-block og
-	meta(property='og:type'        content='article')
-	meta(property='og:title'       content= title)
-	meta(property='og:description' content= page.summary)
-	meta(property='og:url'         content= url)
-	meta(property='og:image'       content= page.eyeCatchingImage ? page.eyeCatchingImage.thumbnailUrl : avatarUrl)
-	meta(property='twitter:card'   content= page.eyeCatchingImage ? 'summary_large_image' : 'summary')
-
-block meta
-	if profile.noCrawle
-		meta(name='robots' content='noindex')
-	if profile.preventAiLearning
-		meta(name='robots' content='noimageai')
-		meta(name='robots' content='noai')
-
-	meta(name='misskey:user-username' content=user.username)
-	meta(name='misskey:user-id' content=user.id)
-	meta(name='misskey:page-id' content=page.id)
-
-	// todo
-	if user.twitter
-		meta(name='twitter:creator' content=`@${user.twitter.screenName}`)

packages/backend/src/server/web/views/page.tsx

@@ -0,0 +1,64 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and misskey-project
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import type { Packed } from '@/misc/json-schema.js';
+import type { MiUserProfile } from '@/models/UserProfile.js';
+import type { CommonProps } from '@/server/web/views/_.js';
+import { Layout } from '@/server/web/views/base.js';
+
+export function PagePage(props: CommonProps<{
+	page: Packed<'Page'>;
+	profile: MiUserProfile;
+}>) {
+	function ogBlock() {
+		return (
+			<>
+				<meta property="og:type" content="article" />
+				<meta property="og:title" content={props.page.title} />
+				{props.page.summary != null ? <meta property="og:description" content={props.page.summary} /> : null}
+				<meta property="og:url" content={`${props.config.url}/pages/${props.page.id}`} />
+				{props.page.eyeCatchingImage != null ? (
+					<>
+						<meta property="og:image" content={props.page.eyeCatchingImage.thumbnailUrl ?? props.page.eyeCatchingImage.url} />
+						<meta property="twitter:card" content="summary_large_image" />
+					</>
+				) : props.page.user.avatarUrl ? (
+					<>
+						<meta property="og:image" content={props.page.user.avatarUrl} />
+						<meta property="twitter:card" content="summary" />
+					</>
+				) : null}
+			</>
+		);
+	}
+
+	function metaBlock() {
+		return (
+			<>
+				{props.profile.noCrawle ? <meta name="robots" content="noindex" /> : null}
+				{props.profile.preventAiLearning ? (
+					<>
+						<meta name="robots" content="noimageai" />
+						<meta name="robots" content="noai" />
+					</>
+				) : null}
+				<meta name="misskey:user-username" content={props.page.user.username} />
+				<meta name="misskey:user-id" content={props.page.user.id} />
+				<meta name="misskey:page-id" content={props.page.id} />
+			</>
+		);
+	}
+
+	return (
+		<Layout
+			{...props}
+			title={`${props.page.title} | ${props.instanceName}`}
+			desc={props.page.summary ?? ''}
+			metaSlot={metaBlock()}
+			ogSlot={ogBlock()}
+		>
+		</Layout>
+	);
+}

packages/backend/src/server/web/views/reversi-game.pug

@@ -1,20 +0,0 @@
-extends ./base
-
-block vars
-	- const user1 = game.user1;
-	- const user2 = game.user2;
-	- const title = `${user1.username} vs ${user2.username}`;
-	- const url = `${config.url}/reversi/g/${game.id}`;
-
-block title
-	= `${title} | ${instanceName}`
-
-block desc
-	meta(name='description' content='⚫⚪Misskey Reversi⚪⚫')
-
-block og
-	meta(property='og:type'        content='article')
-	meta(property='og:title'       content= title)
-	meta(property='og:description' content='⚫⚪Misskey Reversi⚪⚫')
-	meta(property='og:url'         content= url)
-	meta(property='twitter:card'   content='summary')

packages/backend/src/server/web/views/reversi-game.tsx

@@ -0,0 +1,37 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and misskey-project
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import type { Packed } from '@/misc/json-schema.js';
+import type { CommonProps } from '@/server/web/views/_.js';
+import { Layout } from '@/server/web/views/base.js';
+
+export function ReversiGamePage(props: CommonProps<{
+	reversiGame: Packed<'ReversiGameDetailed'>;
+}>) {
+	const title = `${props.reversiGame.user1.username} vs ${props.reversiGame.user2.username}`;
+	const description = `⚫⚪Misskey Reversi⚪⚫`;
+
+	function ogBlock() {
+		return (
+			<>
+				<meta property="og:type" content="article" />
+				<meta property="og:title" content={title} />
+				<meta property="og:description" content={description} />
+				<meta property="og:url" content={`${props.config.url}/reversi/g/${props.reversiGame.id}`} />
+				<meta property="twitter:card" content="summary" />
+			</>
+		);
+	}
+
+	return (
+		<Layout
+			{...props}
+			title={`${title} | ${props.instanceName}`}
+			desc={description}
+			ogSlot={ogBlock()}
+		>
+		</Layout>
+	);
+}

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

@@ -1,44 +0,0 @@
-extends ./base
-
-block vars
-	- const title = user.name ? `${user.name} (@${user.username}${user.host ? `@${user.host}` : ''})` : `@${user.username}${user.host ? `@${user.host}` : ''}`;
-	- const url = `${config.url}/@${(user.host ? `${user.username}@${user.host}` : user.username)}`;
-
-block title
-	= `${title} | ${instanceName}`
-
-block desc
-	meta(name='description' content= profile.description)
-
-block og
-	meta(property='og:type'        content='blog')
-	meta(property='og:title'       content= title)
-	meta(property='og:description' content= profile.description)
-	meta(property='og:url'         content= url)
-	meta(property='og:image'       content= avatarUrl)
-	meta(property='twitter:card'   content='summary')
-
-block meta
-	if user.host || profile.noCrawle
-		meta(name='robots' content='noindex')
-	if profile.preventAiLearning
-		meta(name='robots' content='noimageai')
-		meta(name='robots' content='noai')
-
-	meta(name='misskey:user-username' content=user.username)
-	meta(name='misskey:user-id' content=user.id)
-
-	if profile.twitter
-		meta(name='twitter:creator' content=`@${profile.twitter.screenName}`)
-
-	if !sub
-		if federationEnabled
-			if !user.host
-				link(rel='alternate' href=`${config.url}/users/${user.id}` type='application/activity+json')
-			if user.uri
-				link(rel='alternate' href=user.uri type='application/activity+json')
-			if profile.url
-				link(rel='alternate' href=profile.url type='text/html')
-
-	each m in me
-		link(rel='me' href=`${m}`)

packages/backend/src/server/web/views/user.tsx

@@ -0,0 +1,74 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and misskey-project
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import type { Packed } from '@/misc/json-schema.js';
+import type { MiUserProfile } from '@/models/UserProfile.js';
+import type { CommonProps } from '@/server/web/views/_.js';
+import { Layout } from '@/server/web/views/base.js';
+
+export function UserPage(props: CommonProps<{
+	user: Packed<'UserDetailed'>;
+	profile: MiUserProfile;
+	sub?: string;
+}>) {
+	const title = props.user.name ? `${props.user.name} (@${props.user.username}${props.user.host ? `@${props.user.host}` : ''})` : `@${props.user.username}${props.user.host ? `@${props.user.host}` : ''}`;
+	const me = props.profile.fields
+		? props.profile.fields
+			.filter(field => field.value != null && field.value.match(/^https?:/))
+			.map(field => field.value)
+		: [];
+
+	function ogBlock() {
+		return (
+			<>
+				<meta property="og:type" content="blog" />
+				<meta property="og:title" content={title} />
+				{props.user.description != null ? <meta property="og:description" content={props.user.description} /> : null}
+				<meta property="og:url" content={`${props.config.url}/@${props.user.username}`} />
+				<meta property="og:image" content={props.user.avatarUrl} />
+				<meta property="twitter:card" content="summary" />
+			</>
+		);
+	}
+
+	function metaBlock() {
+		return (
+			<>
+				{props.user.host != null || props.profile.noCrawle ? <meta name="robots" content="noindex" /> : null}
+				{props.profile.preventAiLearning ? (
+					<>
+						<meta name="robots" content="noimageai" />
+						<meta name="robots" content="noai" />
+					</>
+				) : null}
+				<meta name="misskey:user-username" content={props.user.username} />
+				<meta name="misskey:user-id" content={props.user.id} />
+
+				{props.sub == null && props.federationEnabled ? (
+					<>
+						{props.user.host == null ? <link rel="alternate" type="application/activity+json" href={`${props.config.url}/users/${props.user.id}`} /> : null}
+						{props.user.uri != null ? <link rel="alternate" type="application/activity+json" href={props.user.uri} /> : null}
+						{props.profile.url != null ? <link rel="alternate" type="text/html" href={props.profile.url} /> : null}
+					</>
+				) : null}
+
+				{me.map((url) => (
+					<link rel="me" href={url} />
+				))}
+			</>
+		);
+	}
+
+	return (
+		<Layout
+			{...props}
+			title={`${props.user.name || props.user.username} (@${props.user.username}) | ${props.instanceName}`}
+			desc={props.user.description ?? ''}
+			metaSlot={metaBlock()}
+			ogSlot={ogBlock()}
+		>
+		</Layout>
+	);
+}