enhance(backend): pugをやめ、JSXベースのテンプレートに変更 (#16908)

* enhance(backend): pugをやめ、JSXベースのテンプレートに変更 (to misskey-dev dev branch) (#16889) * wip * wip * wip * wip * fix lint * attempt to fix test * fix * fix * fix: oauthページの描画がおかしい問題を修正 * typo [ci skip] * fix * fix * fix * fix * fix * refactor * fix * fix * fix broken lockfile * fix: expose supported languages as global variable * remove i18n package from root as it is no longer required [ci skip] * fix * fix: add i18n package.json to Docker target-builder stage for federation tests (#16909) * Initial plan * fix: add i18n package.json to Docker target-builder stage for federation tests Co-authored-by: syuilo <4439005+syuilo@users.noreply.github.com> --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: syuilo <4439005+syuilo@users.noreply.github.com> * fix: followup-test-federation for enh-remove-pug (#16910) * fix: followup-test-federation for enh-remove-pug * Revert "fix: add i18n package.json to Docker target-builder stage for federation tests (#16909)" This reverts commit 14313468d3. * fix: CSSが読み込まれない場合がある問題を修正 * fix [ci skip] * fix: propsのデフォルト値をnull合体演算子から論理和演算子に変更（空文字に対処するため） * remove @types/pug * enhance: bootloaderを埋め込むように * fix possible race condition * remove esbuild --------- Co-authored-by: Copilot <198982749+Copilot@users.noreply.github.com> Co-authored-by: syuilo <4439005+syuilo@users.noreply.github.com> Co-authored-by: おさむのひと <46447427+samunohito@users.noreply.github.com>
2026-05-23 06:24:15 +02:00 · 2025-12-01 18:36:55 +09:00
parent e1b6e9d4b6
commit f222d7e24d
70 changed files with 1507 additions and 948 deletions
--- a/packages/backend/src/server/web/views/_.ts
+++ b/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;
--- a/packages/backend/src/server/web/views/_splash.tsx
+++ b/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>
+	);
+}
--- a/packages/backend/src/server/web/views/announcement.pug
+++ b/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')
--- a/packages/backend/src/server/web/views/announcement.tsx
+++ b/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>
+	);
+}
--- a/packages/backend/src/server/web/views/base-embed.pug
+++ b/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
--- a/packages/backend/src/server/web/views/base-embed.tsx
+++ b/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>
+		</>
+	);
+}
+
--- a/packages/backend/src/server/web/views/base.pug
+++ b/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
--- a/packages/backend/src/server/web/views/base.tsx
+++ b/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 };
+
--- a/packages/backend/src/server/web/views/bios.pug
+++ b/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
--- a/packages/backend/src/server/web/views/bios.tsx
+++ b/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>
+		</>
+	);
+}
--- a/packages/backend/src/server/web/views/channel.pug
+++ b/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')
--- a/packages/backend/src/server/web/views/channel.tsx
+++ b/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>
+	);
+}
--- a/packages/backend/src/server/web/views/cli.pug
+++ b/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
--- a/packages/backend/src/server/web/views/cli.tsx
+++ b/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>
+		</>
+	);
+}
--- a/packages/backend/src/server/web/views/clip.pug
+++ b/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}`)
--- a/packages/backend/src/server/web/views/clip.tsx
+++ b/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>
+	);
+}
--- a/packages/backend/src/server/web/views/error.pug
+++ b/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
--- a/packages/backend/src/server/web/views/error.tsx
+++ b/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>
+		</>
+	);
+}
--- a/packages/backend/src/server/web/views/flash.pug
+++ b/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}`)
--- a/packages/backend/src/server/web/views/flash.tsx
+++ b/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>
+	);
+}
--- a/packages/backend/src/server/web/views/flush.pug
+++ b/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>`)
-		}
--- a/packages/backend/src/server/web/views/flush.tsx
+++ b/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>
+		</>
+	);
+}
--- a/packages/backend/src/server/web/views/gallery-post.pug
+++ b/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')
--- a/packages/backend/src/server/web/views/gallery-post.tsx
+++ b/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>
+	);
+}
--- a/packages/backend/src/server/web/views/info-card.pug
+++ b/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
--- a/packages/backend/src/server/web/views/info-card.tsx
+++ b/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>
+		</>
+	);
+}
--- a/packages/backend/src/server/web/views/note.pug
+++ b/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')
--- a/packages/backend/src/server/web/views/note.tsx
+++ b/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>
+	)
+}
--- a/packages/backend/src/server/web/views/oauth.pug
+++ b/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)
--- a/packages/backend/src/server/web/views/oauth.tsx
+++ b/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>
+	);
+}
--- a/packages/backend/src/server/web/views/page.pug
+++ b/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}`)
--- a/packages/backend/src/server/web/views/page.tsx
+++ b/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>
+	);
+}
--- a/packages/backend/src/server/web/views/reversi-game.pug
+++ b/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')
--- a/packages/backend/src/server/web/views/reversi-game.tsx
+++ b/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>
+	);
+}
--- a/packages/backend/src/server/web/views/user.pug
+++ b/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}`)
--- a/packages/backend/src/server/web/views/user.tsx
+++ b/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>
+	);
+}